TypeScript - React Context 使用者不会重新渲染主要组件答案

【问题标题】：TypeScript - React Context consumer doesn't re-render the main componentTypeScript - React Context 使用者不会重新渲染主要组件
【发布时间】：2019-07-31 07:34:53
【问题描述】：

我已经为我的应用程序实现了一个反应上下文结构，它可以正常工作并改变我定义的状态。但主要问题是 UI 组件（我有我的消费者）不会重新渲染。这是我在 TypeScript 中的代码：

class Home extends Component<any, any> {
  render() {
    return (
      <DataProvider>
        <MainComponent />
      </DataProvider>
    );
  }
}

我的背景：

import React, { Component } from 'react';

export const dataContext = React.createContext({
  state: {
    temp: 0,
  },
  setGeneralState: () => {
  /* */
  },
});

export default class DataProvider extends Component {
  state = {
    temp: 1,
  };
  render() {
    return (
      <dataContext.Provider
        value={{
          state: this.state,
          setGeneralState: () =>
            this.setState({
              temp: 999,
            }),
        }}
      >
        {this.props.children}
      </dataContext.Provider>
    );
  }
}

以及 UI 中的消费者：

<dataContext.Consumer>
   {(context) => (
        <React.Fragment>
        <p>Temp Value: {context.state.temp}</p>
          <button onClick={context.setGeneralState}>
          Press Me
          </button>
        </React.Fragment>
        )}
 </dataContext.Consumer>

所以当我按下按钮时，它应该将temp 状态设置为 999 并在 UI 中显示它，但它只会在 UI 中的渲染函数操作的某些操作发生时更改 UI。我应该注意到状态在 React DevTools 中发生了变化。

【问题讨论】：

标签： reactjs typescript react-context

【解决方案1】：

只要解决问题！这是由于 react 和 react-dom 包之间的不匹配，其中 react 是 16.8.6 而 react-dom 是 16.5.0。升级 react-dom 后，它现在就像一个魅力 :)

【讨论】：