我试图通过使用这样的嵌套属性来组织我的状态:
this.state = {
someProperty: {
flag:true
}
}
但是像这样更新状态,
this.setState({ someProperty.flag: false });
不起作用.怎么能正确完成?
解决方法:
为了嵌套对象的setState,您可以遵循以下方法,因为我认为setState不处理嵌套更新.
var someProperty = {...this.state.someProperty}
someProperty.flag = true;
this.setState({someProperty})
我们的想法是创建一个虚拟对象对其执行操作,然后用更新的对象替换组件的状态
现在,spread运算符只创建对象的一个级别嵌套副本.如果您的州高度嵌套,如:
this.state = {
someProperty: {
someOtherProperty: {
anotherProperty: {
flag: true
}
..
}
...
}
...
}
您可以在每个级别使用spread运算符setState
this.setState(prevState => ({
...prevState,
someProperty: {
...prevState.someProperty,
someOtherProperty: {
...prevState.someProperty.someOtherProperty,
anotherProperty: {
...prevState.someProperty.someOtherProperty.anotherProperty,
flag: false
}
}
}
}))
然而,随着状态变得越来越嵌套,上面的语法变得丑陋,因此我建议您使用immutability-helper
包来更新状态.
请参阅此答案,了解如何使用immutability helper
更新状态.