使用 setState() 將對象添加到對象數組

Question

我的組件的狀態是一個對象數組：

this.state = {
  userFavorites: [{id: 1, title: 'A'}, {id: 2, title: 'B'}]
}

每次單擊按鈕時，我都需要使用另一個對象更新我的狀態，就像我在上面的狀態中一樣； 例如：{id: 3, title: 'C'}。

如果我簡單地連接它們並設置狀態，最后一個對象會不斷被添加的對象更改。

我在這里需要點差運算符嗎？

Answer 1

你應該這樣做。 以下是在反應中將值或對象推送到數組的最推薦方法

 this.setState( prevState => ({
     userFavorites: [...prevState.userFavourites,  {id: 3, title: 'C'}]
 }));

要推送到數組的開頭，請這樣做

   this.setState( prevState => ({
     userFavorites: [{id: 3, title: 'C'}, ...prevState.userFavourites]
  }));

Answer 2

const userFavorites = [...this.state.userFavorites, {id: 3, title: 'C'}]
this.setState({ userFavorites })

Answer 3

有多種方法可以做到這一點。 您需要做的最簡單的方法是使用擴展運算符。 請注意， item 是添加到 userFavorites 的對象。

this.setState({
  userFavorites: [ ...this.state.userFavorites, item ],
});

注意：如果在某個時候你需要更新數組中的特定項目，你可以使用 immutability-helpers 庫中的更新函數。 https://reactjs.org/docs/update.html

Answer 4

對於功能組件

setUserFavorites((prev) => [...prev, {id: 3, title: 'C'}])