Question

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

<div class="resource">
  <div class="container">
    <div class="row justify-content-center">
      <div class="wrapper d-flex flex-wrap">
        <div class="card col-5">
          <p>test1</p>
        </div>
        <div class="card col-5">
            <p>test1</p>
          </div>
        <div class="card col-5">
          <p>test1</p>
        </div>
      </div>
    </div>
  </div>
</div>

我的背景

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>
    );
  }
}

因此，当我按下按钮时，应将<dataContext.Consumer> {(context) => ( <React.Fragment> <p>Temp Value: {context.state.temp}</p> <button onClick={context.setGeneralState}> Press Me </button> </React.Fragment> )} </dataContext.Consumer>状态设置为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使用者不会重新渲染主要组件

1 个答案: