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

IT技术 javascript reactjs setstate
2021-05-06 23:18:01

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

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

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

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

我在这里需要点差运算符吗?

4个回答

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

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

要推送到数组的开头,请这样做

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

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

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

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

对于功能组件

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

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