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

Posted 2023-03-13

【中文标题】如何在反应中从状态数组中添加或删除项目

【英文标题】：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;  

这是正确的方法吗？

【参考方案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