J'essaie d'organiser mon état en utilisant des propriétés imbriquées comme ceci :
this.state = {
someProperty: {
flag:true
}
}
Mais en mettant à jour l'état comme ceci,
this.setState({ someProperty.flag: false });
ne fonctionne pas. Comment le faire correctement ?
Pour setState
pour un objet imbriqué, vous pouvez suivre l'approche suivante car je pense que setState ne gère pas les mises à jour imbriquées.
var someProperty = {...this.state.someProperty}
someProperty.flag = true;
this.setState({someProperty})
L'idée est de créer un objet fictif, d'effectuer des opérations sur celui-ci, puis de remplacer l'état du composant par l'objet mis à jour.
Désormais, l'opérateur d'étalement ne crée qu'une copie imbriquée à un seul niveau de l'objet. Si votre état est hautement imbriqué comme :
this.state = {
someProperty: {
someOtherProperty: {
anotherProperty: {
flag: true
}
..
}
...
}
...
}
Vous pouvez utiliser l'opérateur d'étalement pour définir l'état à chaque niveau, comme suit
this.setState(prevState => ({
...prevState,
someProperty: {
...prevState.someProperty,
someOtherProperty: {
...prevState.someProperty.someOtherProperty,
anotherProperty: {
...prevState.someProperty.someOtherProperty.anotherProperty,
flag: false
}
}
}
}))
Cependant, la syntaxe ci-dessus devient de plus en plus laide lorsque l'état devient de plus en plus imbriqué et je vous recommande donc d'utiliser le paquet [immutability-helper
][1] pour mettre à jour l'état.
Voir cette réponse sur la façon de mettre à jour l'état avec [immutability-helper
][2].
[1] : https://github.com/kolodny/immutability-helper [2] : https://stackoverflow.com/questions/41949387/how-to-use-immutability-helper-to-update-a-nested-object-within-an-array/41949486#41949486
Il existe de nombreuses bibliothèques pour vous aider dans ce domaine. Par exemple, en utilisant [immutability-helper][1] :
import update from 'immutability-helper';
const newState = update(this.state, {
someProperty: {flag: {$set: false}},
};
this.setState(newState);
Utilisation du jeu [lodash/fp][2] :
import {set} from 'lodash/fp';
const newState = set(["someProperty", "flag"], false, this.state);
Utilisation de [lodash/fp][2] merge :
import {merge} from 'lodash/fp';
const newState = merge(this.state, {
someProperty: {flag: false},
});
[1] : https://github.com/kolodny/immutability-helper [2] : https://gist.github.com/jfmengels/6b973b69c491375117dc#_mergeobject-sources