Question

我对上下文有疑问，上下文api返回了我的undefined值。

这是我的代码：

import { createContext } from "react";

const authContext = createContext();

export default authContext;

authContext.js

import React, { useReducer } from "react";
import authContext from "./authContext";
import authReducer from "./authReducer";

const authState = () => {
  const initState = {
    authValidte: false,
    authToken: null,
    authId: null,
  };
  const [state, dispatch] = useReducer(authReducer, initState);
  return (
    <authContext.Provider
      value={{
        authValidte: state.authValidte,
        authToken: state.authToken,
        authId: state.authId,
      }}
    >
      {props.children}
    </authContext.Provider>
  );
};

export default authState;

authState.js

想要使用上下文的组件：

...
import authContext from "./context/auth/authContext";

function App() {
  const AuthContext = useContext(authContext);
  console.log(AuthContext); // undefined
...

Answer 1

首先，请注意，自定义组件应为大写字母（AuthState，AuthContext.Provider等）。

要使authContext在App中可用，它必须是AuthContext.Provider的子元素。了解有关Context in the docs的信息。

<AuthState>
 <App/>
</AuthState>

Answer 2

为了使您的App Component使用上下文，您需要在App组件的层次结构中向上渲染authState provider

理想情况下，它应该是可能需要使用它的所有组件的共同父代。

还要注意，您的组件名称必须以upperCase个字符开头 index.js

import AuthState from '/path/to/authState.js'

export default () => (
   <AuthState>
      <App/>
   <AuthState>
)

反应useContext返回未定义？

2 个答案: