Javascript useCallback和React.memo访问状态

我有一个功能组件板，在返回的JSX中，我检查了一个2D数组并打印了一堆方块，然后我将一个处理程序和一些附加信息传递到每个方块中。我想防止它们在正方形收到相同的道具时重新命名，这样正方形组件就在React.memo（）方法中。在处理电路板更新的Board组件中，我有一个带有useCallback的处理程序，这样在重新加载时就不会传递一个全新的函数

我没有得到的是，在clickHandler的主体中，我始终可以访问名为to board的新更新2D数组，但我从未收到更改的播放器，它始终保持在1。然而，状态本身被切换为2，反之亦然。如果我将玩家作为依赖项传递，我所有的300+方块都会被OBV重新命名

我不是将状态作为道具传递给正方形，我只是映射到棋盘上，并传递棋盘本身的值

所以我的问题是，为什么我可以访问clickHandler中的更新板，而不能访问播放器。当我点击我的一个方块时，它总是被默认的player1占据

链接到整个回购协议（它只是几个组成部分）：

谢谢

    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传递到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])

---

这就迫使我所有的方块重新旋转。。。由于没有依赖关系，clickHandler中的板是更新版本，但不是播放器。板被更新的原因是您违反了不变性原则。这一行“board_copy[y][x]=player；”修改原始对象。让board_copy=[…board]应该做一个copy@Albert.Hadacek它不是深度复制。每个条目引用相同的对象。所以，board_copy[y]==board[y]