使用splice从数组中删除对象元素React Native

Question

我正在尝试向一个数组中添加和删除对象，我已经成功解决了添加对象的部分，但是删除却不能正常工作。我已经使用了filter()方法，但它没有起作用。现在我使用splice()，它可以删除元素，但是删除的是数组中的第一个元素，而不是选定的项。以下是示例代码，为了更好的清晰度，我仅展示了函数。

        handleDelete(item) {

          this.setState(({ list}) => {
            const newList = [...list];
            newList.splice(item.key, 1);
            console.log('deleted', newList);
            return { list: newList };
          });
        }


        handleAdd() {
          const { firstname, lastname, email, phone} = this.state;
          const ID = uuid();
          const newItemObject = {
              key: ID,
              firstname: firstname,
              lastname: lastname,
              email: email,
              phone: phone,
              image: null,
          };

          this.setState(prevState => ({
            list: [...prevState.list, newItemObject]
          }));
        }

I would like to

- vincent O

Answer 1

该项在数组中的键和索引可能不同。如果该项在数组中，您可以使用Array.indexOf()来查找它的索引，并将其拼接出去。

handleDelete(item) {
  this.setState(({ list }) => {
    const newList = [...list];
    const index = newList.indexOf(item);
    newList.splice(index, 1);

    return {
      list: newList
    };
  });
}

如果您想使用Array.filter()，请检查当前元素(o)的键是否与item的键不同：

handleDelete(item) {
  this.setState(({ list }) => ({
    list: list.filter(o => o.key !== item.key)
  }))
}

- Ori Drori

---

非常感谢，两种方法都有效。 但是哪一种更好用呢？ - vincent O

filter方法更短、更简洁，而且不会创建另一个多余的数组（即从切片中删除的项）。我会使用filter。 - Ori Drori

我还有一个问题，但我不确定是否适合在另一个问题线程下提问。 - vincent O

注释用于讨论特定的问题/答案。创建一个新问题。 - Ori Drori