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

try 在NextJS中创建一个tic-tac-toe游戏，并try 创建一个供我的组件阅读的板上下文.在为更复杂的状态向包装器中引入了一个减缩器之后，我现在得到了一个空错误.

终端中出现错误:

警告:无效的钩子调用.钩子只能在函数组件的主体内部调用.发生这种情况的原因如下:

1. React和渲染器的版本可能不匹配(例如React DOM)
2. 你可能违反了规则
3. 同一个应用程序中可能有多个React副本

我相信我在这个项目中只安装了react版本，下次使用create next app时会安装react版本.我基本上被困在哪里寻找哪里出了问题.在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.这里:

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

游戏状态将在实际网格组件中检索:

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

已解决:const {gameState, dispatch} = useTTTContext();位于其组件体之外.