React TypeScript类组件Context数据无法更新问题求助

核心问题 #

你的代码中App组件没有被MyContextProvider包裹，导致MyContext.Consumer获取的是createContext时定义的默认值，而默认的setData是空函数，所以点击按钮不会触发状态更新。

另外还有两处冗余代码可以优化：

• MyContextProvider构造函数中重复赋值this.props = props是多余的，super(props)已经完成了props的初始化。
• 将setData存入组件state没有必要，直接在Provider的value中传入状态和更新函数即可。

修复步骤 #

1. 用MyContextProvider包裹App组件 #

在渲染App的入口文件（通常是index.tsx）中，将App组件放在MyContextProvider内部：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { MyContextProvider } from './context/MDTContext';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <MyContextProvider>
    <App />
  </MyContextProvider>
);

2. 优化MyContextProvider代码 #

去掉冗余逻辑，简化上下文提供器：

import React from 'react';

type MyContextType = {
  data: string;
  setData: (value: string) => void;
};

export interface MDTContextProps {
  children: React.ReactNode; // 用React.ReactNode覆盖所有合法子节点类型
}

const MyContext = React.createContext<MyContextType>({
  data: 'test',
  setData: () => {},
});

class MyContextProvider extends React.Component<MDTContextProps, { data: string }> {
  constructor(props: MDTContextProps) {
    super(props);
    this.state = {
      data: '', // 可根据需求修改初始值
    };
  }

  componentDidMount(): void {
    console.log('mounter');
  }

  updateData = (value: string) => {
    this.setState({
      data: value,
    });
  };

  render() {
    return (
      <MyContext.Provider value={{ data: this.state.data, setData: this.updateData }}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

export { MyContextProvider, MyContext };

3. 可选：用useContext简化App组件（函数组件） #

如果是函数组件，使用useContext钩子比Consumer更简洁：

import React, { useContext } from 'react';
import { MyContext } from './context/MDTContext';
import './App.css';

function App() {
  const { data, setData } = useContext(MyContext);
  return (
    <div>
      {data}
      <button onClick={() => setData('New Data!')}>Update Data</button>
    </div>
  );
}

export default App;

完成以上修改后，点击按钮就能正常更新data数据了。

内容的提问来源于stack exchange，提问作者melvin debot