Question

我需要在主要组件中使用嵌套状态。我想出了initialState我将用于reset功能。

constructor() {
  ...
  this.initialState = {
    ...
    employees: {
      manager: {
        name: 'Andrew',
        age: 27
      }
      developer: {
        name: 'David'
        age: 32
      }
    }
    ...
  };

  this.state = this.initialState;

但它并不适用于React。由于setState无法处理嵌套属性，因此this.state和this.initialState只是对同一对象的引用。我已经尝试了spread operator，Object.assign，最后遇到了immutability-helper

但我仍然无法理解如何在constructor中设置状态以及如何＆＃34;重置＆＃34;后来该州的employees部分。

state的其他属性是平的。

Answer 1

要设置初始状态，只需使用

this.state = {
    employees:
      manager: {
        name: 'Andrew',
        age: 27
      }
      developer: {
        name: 'David'
        age: 32
      }
}

然后使用setState更改状态对象。

要对状态内的嵌套对象进行更改，我们通过创建一个新对象（嵌套员工对象的副本）来利用对象解构。我们可以对新创建的employee对象进行更改，然后使用this.setState

保存

resetEmployee() {
    let employee = {...this.state.employee}
    employee.someProperty = someNewValue 
    this.setState({employee}) 
}

您可以进一步正确地抽象它，但该示例用于更新状态中的嵌套对象。

对于深层副本，我们会查看JSON.stringify()

如何处理React.js嵌套状态？

1 个答案: