嘗試在 NextJS 中創建井字游戲，并嘗試為我的組件創建棋盤背景關系以供閱讀。一旦我在 Wrapper 中引入了一個 reducer 以獲得更復雜的狀態，我現在就會收到一個 null 錯誤。錯誤：
TypeError: Cannot read properties of null (reading 'useContext')
然后終端出錯：
警告：無效的掛鉤呼叫。鉤子只能在函陣列件的主體內部呼叫。這可能由于以下原因之一而發生：
- 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
- 您可能違反了 Hooks 規則
- 你可能在同一個應用程式中擁有多個 React 副本
我相信我只在這個專案中安裝了 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();在其組件主體之外。
uj5u.com熱心網友回復：
從我所看到的您提供的代碼來看，問題似乎出在最后一個片段中：
import { useTTTContext } from "../contexts/TTTContext";
const {gameState, dispatch} = useTTTContext();
useTTTContext似乎沒有在任何 React 函陣列件主體或任何自定義 React 鉤子中使用/呼叫。它應該被移動到 React 函式或自定義鉤子體中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/475248.html
標籤：javascript 反应 反应钩子 下一个.js
上一篇：如何遞回地物化一個字串