使用 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, setUserFavorites] = useState([]);
setUserFavorites((prev) => [...prev, {id: 3, title: 'C'}])

Answer 3

有多种方法可以做到这一点。您需要执行的操作的最简单方法是使用点差运算符。请注意，该项是要添加到用户收藏夹的对象。

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

注意：如果在某个时候你需要更新数组中的特定项目，你可以使用不可变性帮助程序库中的更新函数。 https://reactjs.org/docs/update.html

Answer 4

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