React中useContext返回undefined问题求助

核心原因：组件未被ContextProvider包裹 #

你的BrandComponent没有被ContextProvider组件包裹，导致useContext无法获取到Provider传递的值，所以返回undefined——这是React Context使用中最常见的错误。

修复步骤 #

1. 在根组件中包裹ContextProvider #

找到应用入口文件（比如main.jsx或App.jsx），将所有需要访问BrandContext的组件（包括BrandComponent）放在ContextProvider内部：

// main.jsx 示例代码
import React from 'react'
import ReactDOM from 'react-dom/client'
import ContextProvider from './context/ContextProvider'
import BrandComponent from './components/BrandComponent'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ContextProvider>
      {/* 所有需要访问Context的组件必须放在这个范围内 */}
      <BrandComponent />
    </ContextProvider>
  </React.StrictMode>,
)

2. 修正BrandComponent中Context的取值 #

你的Provider传递的是对象{imgSrc: logo}，因此在BrandComponent中需要读取imgSrc属性，而非直接使用整个context对象：

// BrandComponent.jsx 修正后代码
import React, { useContext } from "react";
import { BrandContext } from "../../context/ContextProvider";

export default function BrandComponent({
  logoImageSrc,
  customWidth,
  customHeight,
}) {
  const brandContext = useContext(BrandContext);

  return (
    <div className="logo d-flex flex-direction-row custom-width-sm-30 custom-width-md-40 ms-5">
      <h1 className="navbar-brand fs-2 custom-font-family-teko custom-color-darkpurple">
        Gym
        <img
          src={brandContext?.imgSrc} {/* 使用可选链避免未获取到值时报错 */}
          alt="gym-bro-logo"
          className={`custom-width-${customWidth} custom-height-${customHeight}`}
        />
        Bro
      </h1>
    </div>
  );
}

3. 额外验证点 #

• 确认ContextProvider和BrandComponent中BrandContext的导入路径完全一致，保证是同一个Context对象
• 检查ContextProvider的children属性是否正确传递，你的现有代码中{children}的写法是正确的

验证测试 #

按照上述步骤调整后，再测试传递布尔值的场景，就能正常获取到Provider传递的值了。

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