如何在反应中从状态数组中添加或删除项目答案

【问题标题】：How to add or remove an item from state array in react如何在反应中从状态数组中添加或删除项目
【发布时间】：2019-10-13 03:50:05
【问题描述】：

我有状态数组，当用户点击一个项目时，项目应该被添加到状态数组中。我使用类型脚本，数据模型的接口。

这是我使用的代码

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

界面

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

这是正确的方法吗？

【问题讨论】：

标签： reactjs typescript react-native react-redux

【解决方案1】：

这肯定是一个正确的方式，是的，我想说这可能是今天的惯用方式。你正在做两件重要的事情：

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

完美！

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

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

但同样，您的方式可能是当今世界的惯用方式。此外，如果 newItem 是一个数组（例如，activeItemList 打算作为一个数组数组），concat 会传播它，这不好。

【讨论】：

【解决方案2】：

其实我会这样写

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

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

删除我将实现为：

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

【讨论】：

我收到此错误：Argument of type '(prevState: Readonly<IState>) => { activeItemList: (IItem | undefined)[]; }' is not assignable to parameter of type 'IState | ((prevState: Readonly<IState>, props: Readonly<IProps>) => IState | Pick<IState, "activeItemList"> | null) | Pick<IState, "activeItemList"> | null'.
抱歉，修正了一些错别字。

【解决方案3】：

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

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

【讨论】：

您似乎在检查prevState.activeItemList 是否存在，而不检查它是否为数组。更好的方法是启动 state = { activeItemList: [] } 以确保它最初是一个数组，而不是进行检查，对 @kwdowik？
当然，您可以在编写时将空数组分配给构造函数上的 activeItemList，但我认为打字稿仍然会认为 activeItemList 可以是未定义的或为空的。 @DaniVijay