javascript - 使用 "deep"数组 react useState 不重新渲染组件

Question

我在 React 中使用 useState() 存储了一个二维数组。当我更新数组中的某个值时(创建一个全新的二维数组)，它实际上不会使用新值重新渲染我的组件。只有在更新二维数组后我执行其他操作时，该组件才会更新导致组件

我的数组定义如下:

const [grid, setGrid] = useState([
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
  ]

我是这样更新的

    setGrid(prevGrid => {
      const newRow = prevGrid[posy]
      newRow[posx] = currentPlayer
      const newGrid = prevGrid
      newGrid[posy] = newRow
      return newGrid
    }

最后，我在这样的组件中使用它:

<Square status={grid} y={2} x={0} clickEvent={() => handleBoxClick(2, 0)} /

我怀疑问题与状态对象的“深度”有关，但我不认为 React 存在与 Vue 没有检测深度更新相同的问题。 (我以前是 Vue 开发人员)所以，我认为我在更新状态方面做错了什么。

谢谢

Answer 1

React 使用引用比较来检测更改，因此您必须以不可变的方式修改数组。

setGrid(prevGrid => {
  const newRow = [...prevGrid[posy]]
  newRow[posx] = currentPlayer
  const newGrid = [...prevGrid]
  newGrid[posy] = newRow
  return newGrid
}