Intentando crear un juego de tic-tac-toe en NextJS e intentando crear un contexto de tablero para que lean mis componentes. Una vez que introduje un reductor en el Wrapper para un estado más complejo, ahora obtengo un error nulo. Errores: TypeError: Cannot read properties of null (reading 'useContext')

Error en el terminal:

Advertencia: llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:

1. Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
2. Podrías estar rompiendo las Reglas de los Hooks
3. Es posible que tenga más de una copia de React en la misma aplicación

Creo que solo tengo instalada la versión de reacción en este proyecto que se instala a continuación cuando se usa create-next-app. Estoy en gran medida atascado en dónde buscar lo que está mal. ¿No puedo usar el gancho useReducer en lugar del gancho useState al proporcionar contexto en NextJS?

Declaración de contexto:

 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 }

El contexto se aplica en _app.js aquí:

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

Y el estado del juego se recupera en el componente Grid real aquí:

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

Resuelto: const {gameState, dispatch} = useTTTContext(); estaba fuera de su cuerpo componente.