javascript - 如何在react中删除数组中的元素？

Question

我有两个函数，其中一个在数组中添加一项，另一个使用 React JS(钩子(Hook))从该数组中删除一项。[两者都是单击事件的处理程序]。
我所拥有的工作不正确。
“id”来自“contact.length”，我用“contacts.splice(id, 1)”删除了它。
我不知道为什么会出现这个问题。
它不会删除将被点击的内容，而是随机删除的内容。

function handleAddRecord(nameValue, phoneValue) {
        setContacts([...contacts , {
            id : contacts.length,
            name : nameValue,
            phone : phoneValue
        }])
    }
    

    function handleDelete(id) {
        console.log("manager", id);
        const newContacts =  contacts.splice([id],1);
        setContacts([...newContacts]);
    }

Answer 1

实现的问题之一是 id 生成，在删除和添加元素时保持数组长度可能会导致出现问题，在某些情况下，多个项目可能具有相同的 id。

最广泛使用的生成器之一是uuid https://www.npmjs.com/package/uuid

使用

const uuid = require("uuid");
uuid.v4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

现在在您的实现中使用它

添加操作:

const handleAddRecord = (nameValue, phoneValue) => {
  const newRecord = {
    id: uuid.v4(),  // This should be unique at all times
    name: nameValue,
    phone: phoneValue,
  };
  setContacts([...contacts, newRecord]);
};

删除操作:

使用过滤器而不是拼接，因为对于拼接，您需要找到具有id的元素的索引。但使用 Filter 只需一行即可完成

const handleDelete = (id) => {
  setContacts(contacts.filter(item => item.id !== id));
};