useContext 给出 App.js:24 未捕获的类型错误:未定义不可迭代(无法读取属性 Symbol(Symbol.iterator))
2022-04-28
1382
我在我的应用程序中使用 Auth Context Provider,它在此文件中初始化:
authState.js
import React, { useReducer, createContext, useContext } from "react";
import authReducer from "./authReducer";
const initialState = {
user: null,
};
const AuthContext = createContext();
export const AuthStateProvider = ({ children }) => {
const [state, dispatch] = useReducer(authReducer, initialState);
return (
<AuthContext.Provider value={[state, dispatch]}>
{children}
</AuthContext.Provider>
);
};
export const useAuthContext = () => useContext(AuthContext);
然后将此上下文导入 App.js 以获取用户身份验证详细信息:
App.js
...
...
import { useAuthContext } from './context/auth/authState';
...
...
const [{ user }, authDispatch] = useAuthContext();
我在
const [{ user }, authDispatch] = useAuthContext();
行收到错误。
1个回答
我找到了解决方案,所以我在控制台中记录了 @vazsonyidl 建议的
useAuthContext()
,并收到未定义。因此
[state,dispatch]
对
<App/>
组件来说是未知的。我所做的就是将我的
App
组件包装在
<AuthStateProvider></AuthStateProvider>
中,问题就解决了。感谢 @vazsonyidl 的建议。
eternityparadigm
2022-04-30