useCallback和React.memo访问状态

Question

我有一个functional component Board，在返回的JSX中，我遍历了一个2D数组，打印了一串正方形，并传递了一个处理程序和一些附加信息到每个正方形中。我想防止它们在Square接收相同的道具时重新渲染，这样Square组件就在React.memo()方法中。在我处理板子更新的板子组件中，我有useCallback的处理程序，所以我不会在重现过程中传递一个全新的函数。

我不明白的是，在clickHandler的主体中，我总是可以访问最新更新的2D数组，但我从来没有收到更改过的播放器，它总是停留在1。然而，状态本身被切换为2，反之亦然。如果我传递player作为依赖项，我所有的300+方块都会被obvs重新渲染。

我不会将状态作为一个道具传递给Square，我只是在棋盘上进行映射，并从棋盘本身传递值。

所以我的问题是，为什么我可以访问clickHandler中更新的棋盘，而不是播放器。因为当我点击我的一个方块时，它总是被player1获取，这是默认的。

链接到整个存储库(它只是几个组件)：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])