React Hooks useState 数组存储问题

Question

我有以下问题：我有一个方法可以在我的 Grids 组件中返回一个多维数组。 我想将重新计算的任何多维数组存储在单独的列表中。 问题是当我使用以这种方式声明的useState()

const [listGrid,setListGrid] = useState<any[]>([])  

只有当前状态元素重复保存在数组列表中。 按照感兴趣的部分代码：

const [listGrid,setListGrid] = useState<any[]>([]);
const grid= initGrid(); //initialise a new grid.
 const disableButtonHandler = ():void => {
       const cloneGrid =[...grid]
      console.log(cloneGrid===grid)//are no the same!!
      setListGrid(prevListGrid=>[...prevListGrid,cloneGrid]);
};

这是我的列表的快照，其中保存了网格：

所以，基本上， listGrid中存储的所有数组都是相同的，我想存储我的计算列表的任何更改。

我能做些什么错呢？ 提前致谢。

Answer 1

矩阵由数组数组表示，当您复制包含数组时，包含的数组仍然相同。 基本上， cloneGrid[i] === grid[i]对于0 <= i < grid.length为真。

您可以通过执行以下操作来解决此问题：

const cloneGrid = grid.map(row => [...row]);