在 NextJS 中使用 useContext 和 useReducer 并读取 null 作为上下文

Question

尝试在 NextJS 中创建一个井字游戏，并尝试创建一个棋盘上下文供我的组件读取。一旦我将 reducer 引入 Wrapper 以获得更复杂的状态，我现在得到一个空错误。错误： TypeError: Cannot read properties of null (reading 'useContext')

然后终端出错：

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app

我相信我只在这个项目中安装了 react 版本，接下来使用 create-next-app 时安装。我主要停留在在哪里寻找问题所在上。在 NextJS 中提供上下文时，我可以不使用 useReducer 钩子而不是 useState 钩子吗？

上下文声明：

const TTTContext = createContext();
const TTTBoard = new Board(3);

const gameStateReducer = (state, action) => {
    switch (action.type) {
        //...reducer logic
    }
}

const TTTWrapper = ({ children }) => {    
    const [gameState, dispatch] = useReducer(gameStateReducer, {board: TTTBoard, playerPiece:"DEFAULT"});
    const gameContextValue = () => {gameState, dispatch};
    return (
        <TTTContext.Provider value={gameContextValue}>
            {children}
        </TTTContext.Provider>
    );
}

const useTTTContext = () => {
    return useContext(TTTContext)
};

module.exports = { TTTWrapper, useTTTContext }

上下文在_app.js这里应用：

    <TTTWrapper>
      <Component {...pageProps} />
    </TTTWrapper>

游戏状态是在此处的实际 Grid 组件中检索的：

import { useTTTContext } from "../contexts/TTTContext";
const {gameState, dispatch} = useTTTContext();

已解决：const {gameState, dispatch} = useTTTContext(); 在其组件主体之外。

Answer 1

根据我对您提供的代码的了解，问题似乎出在最后一段代码中：

import { useTTTContext } from "../contexts/TTTContext";
const {gameState, dispatch} = useTTTContext();

useTTTContext 似乎不在任何 React 函数组件主体或任何自定义 React 挂钩中 used/called。它应该被移动到 React 函数或自定义钩子体中。

在 NextJS 中使用 useContext 和 useReducer 并读取 null 作为上下文

Using useContext and useReducer in NextJS and reading null as context

javascript

reactjs

react-hooks

next.js