使用setState()将一个对象添加到对象数组中

Question

我的组件状态是对象的数组:

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

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

如果我只是将它们连接起来并设置状态，最后一个对象仍然会被添加的对象更改。

我需要在这里使用展开运算符吗？

- Rafael Guedes

---

由于您正在推送对象，因此在连接时可以使用扩展运算符。请不要使用push。 - vijay krishna

新列表 = [...此状态下用户收藏夹, { id:3, 标题: 'C' }] - Henok Tesfaye

@brk 可以参考这篇帖子。 - vrintle

@brk 因为它会改变状态。 - Rafael Guedes

你是如何“简单地将它们连接起来并设置状态”的？听起来没错。 - Ry-

Answer 1

你应该这样做。下面是在React中将值或对象推入数组的最佳推荐方法。

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

若要将元素推到数组的开头，请按以下方式操作

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

- Hemadri Dasari

---

将顺序反转--OP想要新对象添加到数组的_开头_，而不是结尾。 - Ted

Answer 2

对于函数式组件

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

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

- Justin Joseph

Answer 3

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

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

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

- Ross Sheppard

---

谢谢。这个回答非常有帮助。我一直在为.map()不是一个函数的错误而苦恼。显然，我在状态中错误地向对象数组推送，这对我的应用程序产生了多米诺骨牌效应。展开运算符是关键。谢谢！ - Cheryl Velez

Answer 4

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

- Alfred Ayi-bonte

---

它一直被添加的那个改变着。不确定我的实现是否存在某种问题，但这变得很奇怪。 - Rafael Guedes