代码之家 › 专栏 › 技术社区 › Guilherme

当setState在子组件上运行时,useEffect不更新

typescript reactjs

0

Guilherme · 技术社区 · 3 年前

我正在用react制作一个tic-tac-toe游戏,我将父setState函数传递给子组件,以更改棋盘。

之后,我在父组件中放置了一个useEffect( useEffect(()=> ... , [board])

function handleClick(_, i:number) {

    setBoard(prevBoard => {
  
      const newBoard = board

      newBoard[i] = dictIconToValue[icon] as typeof prevBoard[0]
  
      console.log(newBoard == prevBoard)
  
      return newBoard
  
    })

...

}

2 回复 | 直到 3 年前

1

4

Nicholas Tower 3 年前

控制台。下面的日志显示为true,这可能是useEffect没有更新的原因。

就是这样。react中的状态是不可变的。当你打电话的时候 setBoard Object.is === ). 如果它们是相同的,那么看起来没有什么变化,因此react跳过了重播。React不会检查您所在州的属性是否发生变化,因为这可能会很昂贵。

setBoard(prevBoard => {
  const newBoard = [...board]; // <--- creating a shallow copy
  newBoard[i] = dictIconToValue[icon] as typeof prevBoard[0]
  return newBoard
})

2

David 3 年前

就React而言,状态实际上没有被更新,因为它仍然是同一个对象引用。你是突变

const newBoard = board

所以对 newBoard 直接在状态实例上进行(对其进行变异)。相反,使用现有阵列元素的副本创建一个新阵列(这些元素本身可能是引用,但这通常是一种边缘情况,在这里不应该成为问题):

const newBoard = [...board]

新手板 完全是一个新的对象引用,因此当它设置为状态时,React会将其视为更新状态。