Question

假设我有这个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检测到更改并重新渲染？

深层嵌套状态是否是错误的做法或反模式？如果是这样，状态是否存在最佳结构，也许是平坦的状态？

Answer 1

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

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

Answer 2

我建议看一下浸入式

https://github.com/mweststrate/immer

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

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

ReactJS：深层嵌套状态

2 个答案: