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

Question

我正在尝试使用这样的嵌套属性来组织我的状态：

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

但是像这样更新状态，

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

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

原文由 Alex Yong 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为了 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 更新状态的信息，请参阅 此答案。

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

写在一行

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

原文由 Yoseph 发布，翻译遵循 CC BY-SA 3.0 许可协议