Могу ли я отслеживать изменения вложенных объектов в React Context?

Question

Repro:

const defaultState = {
  value: 1;
  increment() {
    ++this.value;
  }
}

const AppContext = React.createContext({ myState: defaultState });

В компоненте React

class MyComponent extends Component {
  static contextType = AppContext;

  componentDidMount() {
    const { myState } = this.context;
    myState.increment();
  }

  render() {
    const { myState } = this.context;
    return <p>{myState.value}</p>;
  }
}

Ожидается

Показывает 2.

Фактический

Показывает 1.

Как обновить компонент React при изменении внутренних полей в моем состоянии?

Answer 1

Аргумент, заданный для createContext, является значением контекста по умолчанию, если в дереве нет компонента Provider над потребителем. Отключение этого объекта по умолчанию не вызовет повторную визуализацию потребителей контекста.

Вместо этого вы можете поместить Provider в компонент, который имеет value в качестве состояния, и метод increment, который обновляет состояние, и передать их через контекст с помощью value prop.

Пример

const AppContext = React.createContext();

class App extends React.Component {
  state = {
    value: 1
  };

  increment = () => {
    this.setState(({ value }) => ({ value: value + 1 }));
  };

  render() {
    const { increment } = this;

    return (
      <AppContext.Provider value={{ myState: { ...this.state, increment } }}>
        <MyComponent />
      </AppContext.Provider>
    );
  }
}

class MyComponent extends React.Component {
  static contextType = AppContext;

  componentDidMount() {
    this.context.myState.increment();
  }

  render() {
    const { myState } = this.context;
    return <p>{myState.value}</p>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>