I'm forsøger at organisere min tilstand ved hjælp af indlejret ejendom som denne:
this.state = {
someProperty: {
flag:true
}
}
Men opdatering af tilstand på denne måde,
this.setState({ someProperty.flag: false });
virker ikke. Hvordan kan dette gøres korrekt?
For at setState
for et nestet objekt kan du følge nedenstående fremgangsmåde, da jeg tror setState ikke håndterer nestede opdateringer.
var someProperty = {...this.state.someProperty}
someProperty.flag = true;
this.setState({someProperty})
Ideen er at oprette et dummy objekt udføre operationer på det og derefter erstatte komponentens tilstand med det opdaterede objekt
Nu opretter spredningsoperatoren kun en nested kopi af objektet på ét niveau. Hvis din tilstand er meget indlejret som f.eks:
this.state = {
someProperty: {
someOtherProperty: {
anotherProperty: {
flag: true
}
..
}
...
}
...
}
Du kan sætte State ved hjælp af spredningsoperatoren på hvert niveau som
this.setState(prevState => ({
...prevState,
someProperty: {
...prevState.someProperty,
someOtherProperty: {
...prevState.someProperty.someOtherProperty,
anotherProperty: {
...prevState.someProperty.someOtherProperty.anotherProperty,
flag: false
}
}
}
}))
Ovenstående syntaks bliver dog meget grim, når tilstanden bliver mere og mere indlejret, og derfor anbefaler jeg, at du bruger pakken immutability-helper
til at opdatere tilstanden.
Se dette svar om, hvordan du opdaterer tilstanden med immutability-helper
.
Der findes mange biblioteker, der kan hjælpe dig med dette. For eksempel ved at bruge immutability-helper:
import update from 'immutability-helper';
const newState = update(this.state, {
someProperty: {flag: {$set: false}},
};
this.setState(newState);
Ved hjælp af lodash/fp sæt:
import {set} from 'lodash/fp';
const newState = set(["someProperty", "flag"], false, this.state);
Brug af lodash/fp merge:
import {merge} from 'lodash/fp';
const newState = merge(this.state, {
someProperty: {flag: false},
});