React Context API调用返回undefined，请求排查原因

核心原因：未用Context Provider包裹目标组件 #

你在App组件中直接调用useContext(AuthContext)，但此时App组件并没有被AuthContextProvider包裹，所以useContext拿到的是创建Context时传入的默认值"Default"——这是一个字符串，自然没有token属性，因此ctx.token返回undefined。

修复步骤 #

1. 导入并使用AuthContextProvider包裹组件
   首先要在App中导入AuthContextProvider，然后用它将需要访问AuthContext的组件（包括子组件）包裹起来。更合理的做法是把useContext放在被Provider包裹的子组件中（比如Main组件），因为外层的App组件在Provider包裹前调用useContext仍会拿到默认值。

   修改后的App代码：

   import Main from "./components/Main";
   import "./App.css";
   import { Provider } from "react-redux";
   import store from "./store/DataStore";
   import { AuthContextProvider } from "./store/AuthStore";
   
   const App = () => {
     return (
       <Provider store={store}>
         <AuthContextProvider>
           <Main />
         </AuthContextProvider>
       </Provider>
     );
   };
   
   export default App;
   

   在Main组件中使用useContext：

   import { useContext } from "react";
   import AuthContext from "../store/AuthStore";
   
   const Main = () => {
     const ctx = useContext(AuthContext);
     console.log(ctx.token); // 此时会输出"false"
     return <div>Main Component</div>;
   };
   
   export default Main;
   

2. 修正Context值的拼写错误
   你的Store代码中，contextValue里的键名存在拼写错误：loging应该改为login，否则后续调用ctx.login时会找不到对应方法：

   const contextValue = {
     token: "false",
     login: loginHandler, // 修正拼写错误
     logout: logoutHandler,
   };
   

关键逻辑说明 #

React Context的工作规则是：只有被Context.Provider包裹的组件及其子组件，才能通过useContext获取Provider提供的value；如果组件不在Provider的作用范围内，useContext会返回创建Context时传入的默认值。

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