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

22 浏览
0 Comments

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

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

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

但像这样更新状态：

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

不起作用。应该如何正确地做到这一点？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

将其写在一行中

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

0
0 Comments

为了对嵌套对象进行setState，可以采用以下方法，因为我认为setState不处理嵌套更新。

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

想法是创建一个虚拟对象，在其上执行操作，然后使用更新后的对象替换组件的状态。

现在，展开运算符只创建一个层级嵌套的对象副本。如果您的状态高度嵌套，例如：

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

您可以在每个级别使用展开运算符进行setState，例如：

this.setState(prevState => ({
    ...prevState,
    someProperty: {
        ...prevState.someProperty,
        someOtherProperty: {
            ...prevState.someProperty.someOtherProperty, 
            anotherProperty: {
               ...prevState.someProperty.someOtherProperty.anotherProperty,
               flag: false
            }
        }
    }
}))

然而，随着状态变得越来越嵌套，以上语法变得非常丑陋，因此我建议您使用immutability-helper包来更新状态。

请参见此答案，了解如何使用immutability-helper更新状态。

0