useCallback 和 React.memo 訪問狀態

Question

我有一個功能組件板，在返回的 JSX 中，我遍歷一個 2D 數組並打印一堆 Squares，然后將一個處理程序和一些附加信息傳遞給它們中的每一個。 如果 Square 收到相同的 props，我想防止它們重新渲染，因此 Square 組件位於 React.memo() 方法中。 在我處理板子更新的板子組件中，我有一個帶有 useCallback 的處理程序，所以我不會在重新渲染期間傳遞一個全新的函數。

我不明白的是，在 clickHandler 的主體中，我始終可以訪問稱為板的最新更新的 2D 數組，但我從未收到更改過的玩家，它始終保持為 1。然而，狀態本身被切換為2 反之亦然。 如果我將 player 作為依賴項傳遞，則所有 300 多個方塊都將重新渲染。

我沒有將狀態作為道具傳遞給 Square，我只是在板上映射並從板本身傳遞值。

所以我的問題是，為什么我可以訪問 clickHandler 中的更新板，但不能訪問播放器。 當我點擊我的一個方塊時，它總是被 player1 占用，這是默認值。

鏈接到整個 repo（它只是幾個組件）： https : //github.com/TreblaCodes/react-connect5

謝謝

    const [player, setPlayer] = useContext(PlayerContext)
    const [board, setBoard] = useContext(PositionsContext)

    const clickHandler = useCallback((x,y) => {
        let board_copy = [...board]
        board_copy[y][x] = player;
        setBoard(board_copy) 
        console.log(board) //updated
        setPlayer(player === 1 ? 2 : 1)
        console.log(player) // stays at 1
    },[])

Answer 1

只需嘗試將 player 和 board 傳遞給 useCallback 的第二個參數。 然后每當玩家或棋盤發生變化時，您都會獲得新的回調實例。

像這樣：

const [player, setPlayer] = useContext(PlayerContext)
const [board, setBoard] = useContext(PositionsContext)

const clickHandler = useCallback((x,y) => {
    let board_copy = [...board]
    board_copy[y][x] = player;
    setBoard(board_copy) 
    console.log(board) //updated
    setPlayer(player === 1 ? 2 : 1)
    console.log(player) // stays at 1
},[player, board])