Question

我正在基于previousState更改React中的状态。基本上，我要从一组项目中删除一个项目，我想要最好的最简单方法。

这很完美，但也许不是最佳实践？

handleItemsRemove = (id, index) => {
    if (index === -1) {
      return;
    }
    this.setState(
      previousState => {
        const { items } = previousState;
        items.splice(index, 1);
        return {
          items
        };
      }
    );
  };

在此代码中是否存在涉及可变性等问题，以React方式重做previousState？ previousState是否可变，即使这样可变吗？

否则，您认为处理这种情况的最佳方法是什么？

Answer 1

方法splice修改原始数组-因此，这不是您需要的方式。

相反，您可以过滤出不需要的项目。请阅读有关创建新数组的filter方法的更多信息。

此外，您无需为整个状态创建变量。相反，您可以使用destructuring：

handleItemsRemove = (id, index) => {
  if (index === -1) {
    return;
  }

  this.setState(({items}) => ({
    items: items.filter((item, itemIndex) => index !== itemIndex),
  }));
};

Answer 2

来自React docs：

切勿直接更改this.state，因为随后调用setState()可能会替换您所做的更改。将this.state视为不变。

我不确定这是否适用于您的情况，但是为了安全起见，我们建立了一个全新的对象。您可以使用items.slice(0, index)来获取index之前的数组部分，并使用items.slice(index + 1)来获取index之后的部分，然后spread通过新数组获取它们：< / p>

handleItemsRemove = (id, index) => {
  if (index === -1) {
    return;
  }
  this.setState(
    ({items}) => ({
      items: [
        ...items.slice(0, index),
        ...items.slice(index + 1)
      ]
    })
  );
};

更改previousState以在React中设置新状态

2 个答案: