ReactJS：深度嵌套状态答案

【问题标题】：ReactJS: Deep nested stateReactJS：深度嵌套状态
【发布时间】：2019-04-03 21:48:39
【问题描述】：

假设我有这个 React 组件：

    class SomeComponent extends Component {
      constructor(props) {
        super(props);
        this.state = {
          topObject: {
            childObject1: {
              grandChildObj1: {
                attr1: this.props.val1,
                attr2: this.props.val2
              }
            },
            childProp: 1
          },
          topProp: 2
        };
      }

      render() {
        return (
          <div>
            <span>{this.state.topObject.childObject.grandChildObject.attr1}
            </span>
          </div>
          // ...
        )
      }

      changeDeepNestedStateValue(val) {
        // need code here to change the state
        // set topObj.childObject.grandChildObject.attr1
        // to the 'val' argument
      }
    }

我需要在函数“changeDeepNestedStateValue”中使用什么代码，以便它不可变地更改状态，以便 React 检测到更改并重新渲染？

深层嵌套的状态值是不好的做法还是反模式？如果是这样，是否存在一种状态的最佳结构，可能是平坦的？

【问题讨论】：

标签： reactjs nested state

【解决方案1】：

深度嵌套不一定是一种反模式，只会使您的代码更难维护和推理。为了触发重新渲染和更新组件状态，您在changeDeepNestedStateValue 函数中所要做的就是使用您想要更新的任何新状态调用this.setState({ topObject: {...} })。可选地，this.setState 还采用一个函数来公开组件的先前状态，如下所示。

this.setState((prevState) => {
  if (prevState.topProp === val) {
    doSomething();
  }
});

【讨论】：

【解决方案2】：

我建议你看看 immer

https://github.com/mweststrate/immer

它提供了一种超级简单的方法来处理不可变的嵌套对象

但是是的，开箱即用的反应状态管理更平坦的状态是更好的做法

【讨论】：

太好了，感谢 Immer 的领导。我给它加了书签。