静音 previousState 以在 React 中设置新状态

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 将它们放在一个新数组上：

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