useCallback和React.memo访问状态

编程问答 2022-06-04

问题描述

我有一个功能组件板，在返回的JSX中，我遍历2D数组并打印一堆Squares，然后将处理程序以及一些附加信息传递给它们。如果Square收到相同的道具，我想防止它们重新渲染，因此Square组件位于React.memo（）方法中。在负责处理木板更新的木板组件中，我有一个具有useCallback的处理程序，因此在重新渲染期间不会传递全新的功能。

我没有得到的是，在clickHandler的主体中，我始终可以访问被调用的新更新2D数组，但是我从未收到更改过的播放器，它始终保持为1。但是，状态本身被切换为2，反之亦然。如果我将玩家作为依赖者通过，那么我的300多个正方形都将被重新渲染。

我不是将状态作为广场的道具传递，我只是在板上绘制地图并从板上传递值。

所以我的问题是，为什么我可以访问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
    },[])

解决方法

只需尝试将玩家和登机牌传递给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])
callbackcallbackfrontendjavascriptmemoizationreactjsreactjsreactjsreactjs