在狀態突變中反應陣列

Question

我不知道我正在使用的庫中是否存在沖突，但是由於某種原因或其最新反應，但是當我從狀態更新數組時，即使我沒有調用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'
}

由於我從狀態復制了數組，因此僅當我調用時才應該更新狀態

this.setState({
  data: current_data
})

Answer 1

由於我從狀態復制了數組，因此僅當我調用時才應該更新狀態

您做了一個淺表副本。 這個：

  current_data[0].name 

等於說：

this.state.data[0].name

由於淺拷貝， this.state.data[0]和current_data[0]指向同一對象； 即使slice返回了新數組，其元素基本上也指向與原始數組中的元素相同的對象。

您可能對如何不變地修改數組元素之一感興趣。

Answer 2

slice執行數組的淺表復制-意味着僅復制指向數組中包含的對象的指針，而不復制對象本身。

這意味着在slice之后，您有兩個指向相同對象的數組。 因此，自然地，在一個對象中更改一個對象，將在另一個對象中更改它。

而是要創建一個深克隆。 您可以使用不變性幫助器或類似Lodash的工具來實現此目的。