首次使用React Context Hook 调用useContext返回undefined问题求助

核心底层逻辑先明确 #

React Context 的默认值仅在组件上层没有匹配的对应 Context Provider 包裹时才会生效，只要组件被 Provider 包裹，无论 Provider 传入的value是否为undefined，都不会兜底使用createContext时传入的默认值，这是绝大多数符合你已排查条件仍出现问题的核心原因。

具体排查步骤 #

• 检查Context的导出导入一致性
  确认你createContext的导出方式和导入方式完全匹配：
  如果你是命名导出：export const MyContext = createContext(默认值)，导入时必须用import { MyContext } from './context.js'，如果误写为默认导入import MyContext from './context.js'，会导致导入的Context本身为undefined，调用useContext自然返回undefined。
• 验证Provider传入的value值
  在Provider所在组件渲染时打印你传给value属性的变量，确认该变量在Provider首次渲染时不是undefined：
  如果你是通过异步请求、useEffect回调才给value对应的状态赋值，首次渲染时value会是undefined，子组件此时读取就会拿到undefined，不会走兜底默认值。
• 验证Context本身的默认值是否正确写入
  可以直接打印你创建的Context对象的defaultValue属性，确认创建时默认值已正确传入：

  // context.js 临时验证代码
  import { createContext } from 'react';
  const TEST_DEFAULT = { name: '测试默认值' };
  export const MyContext = createContext(TEST_DEFAULT);
  console.log('Context内置默认值：', MyContext.defaultValue); // 输出应为你传入的TEST_DEFAULT
  

• 检查useContext调用规则
  确认useContext是在React组件顶层或自定义Hook内部调用，没有在普通函数、循环、条件判断语句内调用，不符合Hook调用规则也会导致取值异常。

内容的提问来源于stack exchange，提问作者ariel-walley