时间戳

首页 > 解决方案 > 无法从 useContext 访问对象值。使用 useReducer 和 useContext 进行状态管理

reactjs - 无法从 useContext 访问对象值。使用 useReducer 和 useContext 进行状态管理

问题描述

我正在尝试从 useContext 访问我的调度函数以及我的状态。奇怪的是，当我尝试解构上下文对象（因此我可以直接访问它们）时，它告诉我它不存在（错误消息：属性'authDispatch' 在类型'{}'上不存在）。

解构方法：

 const {authDispatch, authState, messageState, messageDispatch} = useContext(GlobalContext)

但是，当我在不解构的情况下 console.log 上下文时，我能够看到具有相应调度程序/状态的对象。但是，我无法在我的代码中使用点符号访问这些方法/状态。

无解构：

const context = useContext(GlobalContext)

控制台日志（上下文）

{authState: {…}, messageState: {…}, authDispatch: ƒ, messageDispatch: ƒ}
authDispatch: ƒ ()
authState: {token: null, isAuthenticated: false, loading: true, user: null}
messageDispatch: ƒ ()
messageState: {loadedMessage: {…}, loading: true}
[[Prototype]]: Object

这是我的 Provier.tsx 文件，其中创建了我的 GlobalContext 以及我的 GlobalProvider。GlobalPrivder 确实包装了整个应用程序。

提供者.tsx

interface IGlobalProvider {
  children: React.ReactNode;
}

export const GlobalContext = createContext({});

export const GlobalProvider: React.FC<IGlobalProvider> = ({ children }) => {
  const [authState, authDispatch] = useReducer(auth, authInitialState);
  const [messageState, messageDispatch] = useReducer(
    todaysMessage,
    todaysMessageInitialState
  );


  return (
    <GlobalContext.Provider
      value={{
        authState,
        authDispatch,
        messageState,
        messageDispatch,
      }}
    >
      {children}
    </GlobalContext.Provider>
  );
};

潜在有用的信息：

提前感谢您的时间。

标签： reactjstypescriptnext.jsuse-contextuse-reducer

解决方案

我只需要在创建上下文时初始化状态

interface ICreateContext {
  authState: IAuthState | null,
  messageState: ITodaysMessageState | null,
  authDispatch: React.Dispatch<any>,
  messageDispatch: React.Dispatch<any>
}

const initialState = {
  authState: null,
  messageState: null,
  authDispatch: () => null,
  messageDispatch: () => null
}

export const GlobalContext = createContext<ICreateContext>(initialState);

但我仍然很好奇为什么我能够 console.log 上下文但没有初始化就不能访问它们。它与渲染周期有关吗？

推荐阅读