ReactJS --有谁能解释一下这种状态是如何改变的，为什么会改变呢？

Question

我正试图让康威的“生命游戏”做出反应。我有一个表示处于状态的网格的布尔值数组，然后为true或false呈现一个“活着”或“死”单元格。

我想出的解决方案是计算周围“活”邻居的数量，以确定一个细胞在下一代中是活的还是死的，包括将角细胞和边缘细胞与其他中间细胞分开处理。

为了做到这一点，我尝试创建一个网格数组的副本，并将表示角单元格和边缘单元格的元素在计数它们的邻居后设置为空。然后，我要对剩下的中间细胞进行迭代，并计算它们周围的邻居。

但是，在将网格副本中的元素更改为null后，状态中的原始网格也会发生变化。有人能解释一下这种行为吗？

console.log(this.state.grid[topLeftCorner]); // false
innerSquare[topLeftCorner] = null;
console.log(this.state.grid[topLeftCorner]); // null

https://codepen.io/Egeroth/pen/jaeYwR

Answer 1

当您将一个现有数组分配给另一个变量时，您不会得到一个副本，这只是指向同一个数组的两个变量。如果您想要创建一个单独的副本，那么请考虑使用array.slice()并查看Copying array by value in JavaScript以获得更多详细信息。

Answer 2

在countNeighbours()方法中，您正在错误地创建gird副本：

let innerSquare = this.state.grid;

这将只复制对网格的引用，而不是复制它。

您应该写：let innerSquare = this.state.grid.slice(0);。

添加.slice(0)实际上会将网格克隆到一个新的数组中。