Avertissement
État imbriqué dans React est une mauvaise conception
Lisez cette excellente réponse .
Raisonnement derrière cette réponse:
SetState de React est juste une commodité intégrée, mais vous vous rendez vite compte qu'il a ses limites. L'utilisation de propriétés personnalisées et l'utilisation intelligente de forceUpdate vous offrent bien plus. par exemple:
class MyClass extends React.Component {
myState = someObject
inputValue = 42
...
MobX, par exemple, l'état des fossés complètement et utilise des propriétés observables personnalisées.
Utilisez les observables au lieu de l'état dans les composants React.
Il existe un autre moyen plus court de mettre à jour la propriété imbriquée.
this.setState(state => {
state.nested.flag = false
state.another.deep.prop = true
return state
})
Sur une seule ligne
this.setState(state => (state.nested.flag = false, state))
Remarque: Ceci est l' opérateur Comma ~ MDN , voyez-le en action ici (Sandbox) .
Il est similaire à (bien que cela ne change pas la référence d'état)
this.state.nested.flag = false
this.forceUpdate()
Pour la différence subtile dans ce contexte entre forceUpdate
et setState
voir l'exemple lié.
Bien sûr, cela abuse de certains principes de base, car le state
devrait être en lecture seule, mais puisque vous jetez immédiatement l'ancien état et le remplacez par un nouvel état, c'est tout à fait correct.
Attention
Même si le composant contenant l'état se mettra à jour et se restituera correctement ( sauf ce gotcha ) , les accessoires ne se propageront pas aux enfants (voir le commentaire de Spymaster ci-dessous) . N'utilisez cette technique que si vous savez ce que vous faites.
Par exemple, vous pouvez passer un accessoire plat modifié qui est mis à jour et transmis facilement.
render(
//some complex render with your nested state
<ChildComponent complexNestedProp={this.state.nested} pleaseRerender={Math.random()}/>
)
Maintenant, même si la référence à complexNestedProp n'a pas changé ( shouldComponentUpdate )
this.props.complexNestedProp === nextProps.complexNestedProp
le composant se rendra à chaque mise à jour du composant parent, ce qui est le cas après l'appel this.setState
ou this.forceUpdate
dans le parent.
Effets de la mutation de l'État
L'utilisation de l' état imbriqué et la mutation directe de l'état est dangereuse car différents objets peuvent contenir (intentionnellement ou non) différentes références (plus anciennes) à l' état et ne savent pas nécessairement quand mettre à jour (par exemple lors de l'utilisation PureComponent
ou si shouldComponentUpdate
est implémenté pour revenir false
) OU sont destiné à afficher les anciennes données comme dans l'exemple ci-dessous.
Imaginez une chronologie qui est censée rendre des données historiques, la mutation des données sous la main entraînera un comportement inattendu car elle modifiera également les éléments précédents.
Quoi qu'il en soit ici, vous pouvez voir Nested PureChildClass
qu'il n'a pas été rendu à nouveau en raison de la non-propagation des accessoires.