如何在React中设置嵌套状态

我尝试通过做这样的嵌套属性来组织我的状态

this.state = { someProperty: { flag:true } } 

然后我试图更新我的状态

 this.setState({someProperty.flag: false}); 

它不这样工作。

Answer 1

为了setState嵌套的对象，你可以按照下面的方法，因为我认为setState不处理嵌套的更新。

 var someProperty = {...this.state.someProperty} somePrperty.flag = true; this.setState({someProperty}) 

这个想法是创build一个虚拟对象执行操作，然后用更新的对象replace状态

Answer 2

使用包不可变性帮手 ：

 import update from 'immutability-helper'; const newState = update(this.state, { someProperty: {flag: {$set: false}} }; this.setState(newState); 

Answer 3

如果您正在使用ES2015，则可以访问Object.assign。 您可以按如下方式使用它来更新嵌套的对象。

 this.setState({ someProperty: Object.assign(this.state.someProperty, {flag: false}) }); 

您将已更新的属性与已有的属性合并，并使用返回的对象来更新状态。

Answer 4

把它写在一行中

 this.setState({ someProperty: { ...this.state.someProperty, flag: false} });