将具有setState（）的对象添加到对象数组

Question

我组件的状态是一个对象数组：

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

每次单击按钮时，我都需要用另一个对象更新状态，例如上面状态中的对象；例如：{id：3，标题：“ C”}。

如果我简单地合并它们并设置状态，那么最后一个对象将一直被添加的对象更改。

我这里需要传播算子吗？

Answer 1

您应该这样做。以下是在react中将值或对象推入数组的最推荐方法

 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库中的update函数。 https://reactjs.org/docs/update.html