Question

我有状态数组，当用户单击项目时，应将项目添加到状态数组。我使用类型脚本，数据模型的界面。

这是我使用的代码

this.setState(prevState => ({
  this.state.activeItemList: [...prevState.activeItemList, newItem]
}))

接口

interface IState {     activeItemList?: IItem[] | null;  }

这是正确的方法吗？

Answer 1

当然，这是正确的方法，是的，我想这可能是当今的惯用方法。您正在做两项重要的事情：

您正在使用setState的回调版本，并且
您要创建一个新的数组，而不修改状态上的现有数组。

完美！

您也可以使用concat而不是传播：

this.setState(prevState => ({
  this.state.activeItemList: prevState.activeItemList.concat(newItem)
}))

但是同样，您的方式可能是当今世界的惯用方式。另外，如果newItem是一个数组（例如activeItemList打算作为数组的数组），则concat会将其散布，那将不是很好。

Answer 2

实际上，我将其写为

this.setState(prevState => ({
  ...prevState,
  activeItemList: [...prevState.activeItemList, newItem]
}))

使用IState的当前定义，它的含义完全相同，但是如果IState发生变化，我已经准备好了。另外，该代码强调，它所做的只是添加newItem而不删除其他任何内容。

删除我将实现为：

this.setState(prevState => ({
  ...prevState,
  activeItemList: prevState.activeItemList.filter(item => item !== oldItem)
}))

Answer 3

首先，您需要检查数组是否不为null或未定义，然后可以向存在的数组中添加一个新元素，否则使用newItem创建一个数组。

 this.setState((prevState) => ({
        ...prevState,
        activeItemList: prevState.activeItemList ? [...prevState.activeItemList, newItem] : [newItem],
    }));

如何在React中从状态数组添加或删除项目

3 个答案: