React Hooks useState存储多维数组时出现重复值问题如何解决？

问题根因 #

你当前使用的[...grid]是浅拷贝操作，仅能复制多维数组的最外层结构，内层的子数组仍然和原grid变量的内层数组共享引用。后续你修改原grid的内层元素时，已经存入listGrid的拷贝对象也会同步变更，最终表现为列表里所有元素都和最新状态一致。

解决方案 #

根据你的数组结构选择对应的深拷贝方案即可：

• 如果你的网格是无特殊不可序列化内容的普通二维数组，可以直接用JSON序列化方式快速实现深拷贝：

const disableButtonHandler = ():void => {
      const cloneGrid = JSON.parse(JSON.stringify(grid))
      setListGrid(prevListGrid=>[...prevListGrid,cloneGrid]);
};

• 如果数组中存在Date对象、undefined、函数等无法被JSON序列化的内容，可以手动实现对应层级的深拷贝，以二维数组为例：

const disableButtonHandler = ():void => {
      // 多维数组可以依此类推做多层拷贝，或者引入成熟的深拷贝工具函数
      const cloneGrid = grid.map(row => [...row])
      setListGrid(prevListGrid=>[...prevListGrid,cloneGrid]);
};

额外注意事项 #

你当前的grid是直接在组件顶层执行initGrid()初始化的，组件每次重渲染都会重新执行该方法生成新的初始网格，建议将grid也用useState存储，避免非预期的初始化：

// 传入函数作为初始值，仅在组件首次渲染时执行一次initGrid
const [grid, setGrid] = useState(() => initGrid());

内容的提问来源于stack exchange，提问作者Markus