ReactJS: глубокое вложенное состояние

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

Я бы порекомендовал взглянуть на immer

https://github.com/mweststrate/immer

Это обеспечивает супер простой способ работы с вложенными объектами с точки зрения неизменности

Но да, более плоское состояние с готовым управлением состоянием - это лучшая практика

Answer 2

Глубокое вложение не обязательно является анти-паттерном, а только усложняет поддержку вашего кода и его рассуждение. Чтобы запустить повторную визуализацию и обновить состояние компонента, все, что вам нужно сделать в функции changeDeepNestedStateValue, это вызвать this.setState({ topObject: {...} }) с любым новым состоянием, которое вы хотите обновить. По желанию, this.setState также принимает функцию, которая предоставляет предыдущее состояние компонента, как показано ниже.

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