Question

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

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'
}

由于我从状态复制了数组，因此仅在调用时才应更新状态

this.setState({
  data: current_data
})

Answer 1

由于我从状态复制了数组，因此状态不应该是仅在我打电话时更新

您制作了shallow副本。这个：

  current_data[0].name

等于说：

this.state.data[0].name

由于复制浅，

this.state.data[0]和current_data[0]指向相同对象；即使slice返回了新数组，其元素基本上也指向与原始数组中的元素相同的对象。

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

Answer 2

slice对数组执行 shallow 复制-意味着仅复制指向数组中包含的对象的指针，而不复制对象本身。

这意味着在slice之后，您有两个指向相同对象的数组。那么自然地，在一个对象中更改一个对象，在另一个对象中更改它。

相反，您要做的是创建一个深层克隆。您可以使用immutability-helper或类似Lodash的工具来实现此目的。

在状态突变中反应阵列

2 个答案: