如何在React中更新嵌套状态属性

为了

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-helper

有关如何使用更新状态的信息，请参见此答案

immutabilityhelper