React Context值无法从Provider传递到Consumer/useContext问题

我编写了如下React Context相关代码：

const ThemeContext = createContext(null);

const ThemeProvider = ({ theme, ...restProps }) => {
  const props = {
    ...restProps,
    className: `theme-${theme}`,
  };

  console.info("className =", props.className); // 输出 "className = theme-dark"

  return (
    <ThemeContext.Provider value={theme}>
      <div className={props.className}>{props.children}</div>
    </ThemeContext.Provider>
  );
};

const MyComponent = () => {
  const themeContext = useContext(ThemeContext);

  console.info("themeContext =", themeContext); // 输出 "themeContext = undefined"

  return (
    <div>
      <ThemeContext.Consumer>
        {(theme) => {
          console.info("my theme =", theme); // 输出 "my theme = undefined"
          return (
            <>
              <p>MY THEME IS: {theme}</p>
            </>
          );
        }}
      </ThemeContext.Consumer>
    </div>
  );
};

function App() {
  return (
    <div>
      <ThemeProvider theme="dark">
        <MyComponent />
      </ThemeProvider>
    </div>
  );
}

export default App;

控制台输出如下：

className = theme-dark
App.js:330 themeContext = undefined
App.js:336 my theme = undefined

不清楚为何Context的值无法从Provider正常传递到Consumer和useContext中？

问题原因及解决方案 #

1. 最可能的原因：使用了不同的ThemeContext实例

如果代码拆分在多个文件中，很可能在MyComponent所在文件里重新执行了const ThemeContext = createContext(null)，导致Provider和Consumer用的不是同一个Context对象。Context的传递完全依赖同一个实例，不同实例之间无法共享值。

解决方法：

• 在单独文件中定义并导出Context和Provider，确保所有组件导入同一个实例：

// context/ThemeContext.js
import { createContext } from 'react';

export const ThemeContext = createContext(null);

export const ThemeProvider = ({ theme, children }) => {
  const className = `theme-${theme}`;
  console.info("className =", className);

  return (
    <ThemeContext.Provider value={theme}>
      <div className={className}>{children}</div>
    </ThemeContext.Provider>
  );
};

• 在MyComponent和App中统一导入：

import { ThemeContext, ThemeProvider } from './context/ThemeContext';

2. 简化children的传递逻辑

你用...restProps接收children的逻辑本身没问题，但显式解构children可以避免意外的props干扰，让代码更清晰，修改后的ThemeProvider如上所示。

3. 确认React版本支持Hook

useContext是React 16.8及以上版本才支持的Hook，如果版本过低会导致Hook失效。可以通过以下命令升级：

npm install react@latest react-dom@latest

4. 排查是否存在多层Provider覆盖

如果组件树中存在多个ThemeContext.Provider，且内层Provider传递了undefined，会覆盖外层的有效值。检查代码中是否有其他地方误用了ThemeContext.Provider。

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