一尘不染

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

javascript

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

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

但是像这样更新状态

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

不起作用。如何正确完成?


阅读 411

收藏
2020-04-25

共1个答案

一尘不染

为了setState创建嵌套对象,您可以按照以下方法进行操作,因为我认为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- helperpackage更新状态。

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

2020-04-25