React中useContext返回undefined求助（已用Provider包裹组件）

API 探路者

2026-7-29

React useContext 返回 undefined 的排查与解决

问题根源分析

你的代码中导致useContext返回undefined的核心原因有两点：

State初始值未赋值
在MessageProvider中，useState()未传入初始参数，此时messageContent的初始值就是undefined。尽管你给createContext设置了默认值"KITA KO SALAMA"，但只要组件被Provider包裹，React就会优先使用Provider传递的value，而非createContext的默认值。
（可选）未使用自定义钩子（非直接原因，但影响代码规范）
你已经定义了useMessage()钩子，但代码中直接调用useContext(MessageContext)，虽然功能上没问题，但自定义钩子能简化上下文的使用，避免重复导入MessageContext。

解决方案

1. 为State设置初始值

修改MessageContext.jsx中的useState，传入初始值（建议和createContext的默认值保持一致）：

export function MessageProvider({ children }){
    // 给useState设置初始值，覆盖undefined的默认状态
    const [messageContent, setMessageContent] = useState("KITA KO SALAMA")

    return (
        <MessageContext.Provider value={messageContent}>
            <MessageUpdateContext.Provider value={setMessageContent}>
                {children}
            </MessageUpdateContext.Provider>
        </MessageContext.Provider>
    )
}

2. 使用自定义钩子获取上下文

在需要获取上下文的组件中，用你定义的useMessage()替代直接调用useContext：

import { useMessage } from './context/MessageContext';

function YourComponent() {
  const message = useMessage();
  console.log("context value is: " + message);
  // 其他逻辑
}