Sto cercando di organizzare il mio stato usando proprietà annidate come questa:
this.state = {
someProperty: {
flag:true
}
}
Ma aggiornando lo stato in questo modo,
this.setState({ someProperty.flag: false });
non funziona. Come può essere fatto correttamente?
Per setState
per un oggetto annidato potete seguire l'approccio seguente, poiché penso che setState non gestisca gli aggiornamenti annidati.
var someProperty = {...this.state.someProperty}
someProperty.flag = true;
this.setState({someProperty})
L'idea è quella di creare un oggetto fittizio, eseguire operazioni su di esso e poi sostituire lo stato del componente con l'oggetto aggiornato
Ora, l'operatore di diffusione crea solo una copia annidata di un livello dell'oggetto. Se il vostro stato è altamente annidato come:
this.state = {
someProperty: {
someOtherProperty: {
anotherProperty: {
flag: true
}
..
}
...
}
...
}
Potreste impostare lo stato usando l'operatore di diffusione ad ogni livello come
this.setState(prevState => ({
...prevState,
someProperty: {
...prevState.someProperty,
someOtherProperty: {
...prevState.someProperty.someOtherProperty,
anotherProperty: {
...prevState.someProperty.someOtherProperty.anotherProperty,
flag: false
}
}
}
}))
Tuttavia la sintassi di cui sopra diventa sempre più brutta quando lo stato diventa sempre più annidato e quindi vi consiglio di usare il pacchetto immutability-helper
per aggiornare lo stato.
Vedi questa risposta su come aggiornare lo stato con immutability helper
.
Ci sono molte librerie che aiutano in questo. Per esempio, usando immutability-helper:
import update from 'immutability-helper';
const newState = update(this.state, {
someProperty: {flag: {$set: false}},
};
this.setState(newState);
Usando lodash/fp set:
import {set} from 'lodash/fp';
const newState = set(["someProperty", "flag"], false, this.state);
Usando lodash/fp merge:
import {merge} from 'lodash/fp';
const newState = merge(this.state, {
someProperty: {flag: false},
});