ReactJS - 谁能解释这个状态是如何以及为什么被改变的？答案

【问题标题】：ReactJS - Can anyone explain how and why this state is being altered?ReactJS - 谁能解释这个状态是如何以及为什么被改变的？
【发布时间】：2017-11-29 09:51:16
【问题描述】：

我正在尝试使用 React 制作 Conway 的生命游戏。我有一个布尔值数组，表示处于状态的网格，然后为真值或假值渲染一个“活动”或“死”单元格。

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

为了做到这一点，我尝试制作一个网格数组的副本，并在计算完它们的邻居后将表示角单元和边缘单元的元素设置为 null。然后，我将遍历剩余的中间单元格并计算它们周围的邻居。

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

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

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

【问题讨论】：

你是如何复制状态的？你的代码是let innerSquare = this.state.grid?
那是因为innerSquare引用了状态并且状态是可变的，你需要创建一个状态的克隆并对其进行处理

标签： javascript reactjs ecmascript-6 babeljs

【解决方案1】：

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

【讨论】：

【解决方案2】：

在countNeighbours() 方法中，您正在以错误的方式创建网格副本：

let innerSquare = this.state.grid;

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

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

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

【讨论】：

很好的答案 :) 如果可以的话，我会接受这两个答案。非常感谢。