javascript – 如何更新React中的嵌套状态属性

我试图通过使用这样的嵌套属性来组织我的状态:

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更新状态.

上一篇:React转Vue


下一篇:新手学习 React 迷惑的点