javascript - 使用“深度”数组对 useState 做出反应，而不是重新渲染组件

Question

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

我的数组定义如下：

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 开发人员）所以，我认为我在更新状态时做错了。

谢谢

标签： javascriptreactjs

Answer 1

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

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