TypeScript

Question

我已经为我的应用程序实现了一个反应上下文结构，它可以正常工作并更改我定义的状态。但主要问题是 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 中发生了变化。

Answer 1

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

TypeScript - React Context 消费者不重新渲染主要组件

TypeScript - React Context consumer doesn't re-render the main component

reactjs

react-context