How to update nested state properties in React

后端 未结 26 2017
野趣味
野趣味 2020-11-21 06:35

I\'m trying to organize my state by using nested property like this:

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

But updating

26条回答
  •  忘了有多久
    2020-11-21 07:21

    In order to setState for a nested object you can follow the below approach as I think setState doesn't handle nested updates.

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

    The idea is to create a dummy object perform operations on it and then replace the component's state with the updated object

    Now, the spread operator creates only one level nested copy of the object. If your state is highly nested like:

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

    You could setState using spread operator at each level like

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

    However the above syntax get every ugly as the state becomes more and more nested and hence I recommend you to use immutability-helper package to update the state.

    See this answer on how to update state with immutability helper.

提交回复
热议问题