Javascript 在状态变化中反应数组

我不知道我正在使用的库中是否存在冲突，但出于某种原因或其最新反应，但当我从状态更新数组时，它正在对其进行变异，即使我没有调用setState。我不知道这种状态下的数组是否有特殊情况

constructor(props){
    super(props);

    this.state = {
      data: [
        { id: 1, name: 'hello' },
        { id: 2, name: 'world' },
        { id: 3, name: 'once' }
      ]
    }
}
performUpdate() {
  const { data } = this.state;

  var current_data = data.slice();

  current_data[0].name = 'helloooooo';

  console.log(data)

  // it shows data.id 1 now has name: 'helloooooo'
}

既然我从state复制了一个数组，那么状态不应该只在调用

this.setState({
  data: current_data
})

既然我从state复制了数组，那么state不应该是 只有在我打电话时才更新

this.setState({
  data: current_data
})

你复制了一份。这：

  current_data[0].name 

也就是说：

this.state.data[0].name

此.state.data[0]

和

当前数据[0]

由于浅拷贝，指向相同的对象；尽管

slice

返回了新数组，但它的元素基本上指向与原始数组中的元素相同的对象

您对如何不可变地修改一个数组元素感兴趣。

执行数组的浅层复制-这意味着只复制数组中包含的对象指针，而不复制对象本身

这意味着在

切片之后

有两个数组指向相同的对象。自然地，在一个物体中改变一个物体，就会在另一个物体中改变它

---

相反，您要做的是创建一个深度克隆。您可以使用Lodash或类似Lodash的东西来实现这一点。

关键是

当前\u数据

是

数据

的参考。因此，当您更新当前数据的值时，实际上是在更新数据的值。阅读