我试图通过使用这样的嵌套属性来组织我的状态:
this.state = { someProperty: { flag:true } }
但是像这样更新状态
this.setState({ someProperty.flag: false });
不起作用。如何正确完成?
为了setState创建嵌套对象,您可以按照以下方法进行操作,因为我认为setState无法处理嵌套更新。
setState
var someProperty = {...this.state.someProperty} someProperty.flag = true; this.setState({someProperty})
这个想法是创建一个虚拟对象,对其执行操作,然后用更新的对象替换组件的状态
现在,散布运算符仅创建对象的一级嵌套副本。如果您的状态是高度嵌套的,例如:
this.state = { someProperty: { someOtherProperty: { anotherProperty: { flag: true } .. } ... } ... }
您可以在每个级别使用传播运算符来设置状态,例如
this.setState(prevState => ({ ...prevState, someProperty: { ...prevState.someProperty, someOtherProperty: { ...prevState.someProperty.someOtherProperty, anotherProperty: { ...prevState.someProperty.someOtherProperty.anotherProperty, flag: false } } } }))
但是,随着状态变得越来越嵌套,上述语法变得非常丑陋,因此,我建议您使用immutability- helperpackage更新状态。
immutability- helper
有关如何使用更新状态的信息,请参见此答案immutability helper。
immutability helper