如何解决从Consumer读取Provider的Context值显示undefined的问题？

问题 #

将state设置到Context Provider的value属性中后，读取到的值显示为undefined，该如何修复？

错误表现 #

读取Context值时返回undefined

相关代码 #

context.tsx #

import React, { Component } from 'react';
import { createContext } from 'react';

const Context = React.createContext('text');

// 自定义Provider组件
export class Provider extends Component {
    state = {
        track_list: [
            {Track: {track_name:'abc'}},
            {Track: {track_name:'123'}}
        ],
        heading: 'Top 10 Tracks'
    }
  render() {
    return (
      <Context.Provider value={this.state}>
          {this.props.children}
      </Context.Provider>
    )
  }
}

export const Consumer = Context.Consumer;

package.json #

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.8.3"
  }
}

解决步骤 #

1. 确认Provider的包裹范围 #

确保所有需要读取Context的组件完全被自定义Provider包裹，比如在根组件中：

import { Provider } from './context';
import TrackList from './TrackList';

function App() {
  return (
    <Provider>
      {/* 所有需要消费Context的组件都放在这里面 */}
      <TrackList />
    </Provider>
  );
}

2. 检查Context的消费方式 #

方式一：使用Consumer组件

确保回调函数正确接收Context值：

import { Consumer } from './context';

function TrackList() {
  return (
    <Consumer>
      {(context) => {
        console.log(context); // 先打印确认值是否存在
        return (
          <div>
            <h1>{context?.heading}</h1>
            {context?.track_list.map((item, index) => (
              <div key={index}>{item.Track.track_name}</div>
            ))}
          </div>
        );
      }}
    </Consumer>
  );
}

方式二：使用useContext Hook（推荐）

注意要导入正确的Context对象，而非Consumer：

import React, { useContext } from 'react';
import { Context } from './context';

function TrackList() {
  const context = useContext(Context);
  console.log(context); // 确认值是否存在
  
  // 处理可能的undefined情况
  if (!context) return <div>加载中...</div>;

  return (
    <div>
      <h1>{context.heading}</h1>
      {context.track_list.map((item, index) => (
        <div key={index}>{item.Track.track_name}</div>
      ))}
    </div>
  );
}

3. 修正Context的初始值（TypeScript环境必做） #

原代码中createContext的初始值为字符串'text'，但Provider传入的是对象，类型不匹配，建议改为同类型的初始值：

// 修改context.tsx中的Context创建部分
interface ContextState {
  track_list: Array<{ Track: { track_name: string } }>;
  heading: string;
}

// 可以设置为undefined，或者给一个默认空对象
const Context = React.createContext<ContextState | undefined>(undefined);

// 或者：
// const Context = React.createContext<ContextState>({
//   track_list: [],
//   heading: ''
// });

4. 检查导入是否正确 #

确保使用Provider时，导入的是你自定义的Provider组件，而非React自带的Provider：

// 正确
import { Provider } from './context';

// 错误（不要这么写）
import { Provider } from 'react';

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