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])