使用 setState() 将对象添加到对象数组答案

【问题标题】：Add an object with setState() to an array of objects使用 setState() 将对象添加到对象数组
【发布时间】：2018-10-23 17:40:49
【问题描述】：

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

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

每次单击按钮时，我都需要用另一个对象更新我的状态，就像我在上面状态中的对象一样；例如：{id: 3, title: 'C'}。

如果我只是简单地连接它们并设置状态，最后一个对象会不断被正在添加的对象更改。

这里需要展开运算符吗？

【问题讨论】：

【解决方案1】：

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

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

要推到数组的开头这样做

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

有多种方法可以做到这一点。您需要做的最简单的方法是使用扩展运算符。请注意，item 是要添加到 userFavorites 的对象。

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

注意：如果在某些时候您需要更新数组中的特定项目，您可以使用 immutability-helpers 库中的更新函数。 https://reactjs.org/docs/update.html

【讨论】：

谢谢。这个回应非常有帮助。我一直在用 .map() 拉头发不是函数错误。我显然错误地推送到状态中的对象数组，这对我的应用程序的其余部分产生了多米诺骨牌效应。扩展运算符是关键。谢谢！

【解决方案4】：

用于功能组件

const [userFavorites, setUserFavorites] = useState([]);

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

【讨论】：