消费多个React Context时出现错误，与讲师代码一致仍报错

以下是针对你代码报错的排查方向和解决方法：

1. 检查Context的定义与导出 #

确认../../App.js中正确创建并导出了Context，同时用Provider包裹了组件树：

• 创建Context的正确写法：

  import React from 'react';
  // 导出两个Context
  export const UserContext = React.createContext();
  export const ChannelContext = React.createContext();
  

• 在App组件中必须用Provider包裹子组件并传入value：

  function App() {
    return (
      <UserContext.Provider value="你的用户值">
        <ChannelContext.Provider value="你的频道值">
          {/* E组件必须在Provider范围内渲染 */}
          <E />
        </ChannelContext.Provider>
      </UserContext.Provider>
    );
  }
  

2. 验证React版本 #

Context API是React 16.3及以上才支持的特性，运行npm list react查看版本，低于16.3的话执行npm install react@latest react-dom@latest升级。

3. 排查路径与拼写错误 #

• 确认../../App的导入路径正确，比如App文件是否在对应层级，文件名大小写是否匹配（Linux/macOS系统区分大小写）。
• 检查UserContext、ChannelContext的名称拼写，确保导入和使用时完全一致。

4. 确认组件渲染层级 #

E组件必须被两个Context的Provider同时包裹，如果组件在Provider外部，消费时会拿到Context的默认值（未设置则为undefined），可能引发报错。

修正后的完整代码示例 #

App.js #

import React from 'react';
import E from './components/E'; // 根据你的实际组件路径调整

export const UserContext = React.createContext();
export const ChannelContext = React.createContext();

function App() {
  return (
    <UserContext.Provider value="Ketan">
      <ChannelContext.Provider value="Stack Exchange">
        <E />
      </ChannelContext.Provider>
    </UserContext.Provider>
  );
}

export default App;

E.js #

import React from "react";
import { UserContext, ChannelContext} from "../../App";

const E = () => {
  return (
    <div>
      <p>How to consume multiple contexts</p>
      <UserContext.Consumer>
        {user => (
          <ChannelContext.Consumer>
            {channel => (
              <div>
                User Context value: {user} and Channel Context value: {channel}
              </div>
            )}
          </ChannelContext.Consumer>
        )}
      </UserContext.Consumer>
      <p>First step is to create context</p>
      <p>Second step is to wrap by provider</p>
      <p>Third step is to consume</p>
    </div>
  );
};

export default E;

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