实现中的问题之一是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));
};

这里我们假设这id是要删除的元素的索引。

该splice函数返回已删除的元素，因此获取其结果没有用。相反，首先复制数组，然后删除不需要的元素：

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

那是因为splice改变了数组本身。

更多信息：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

好的，id 返回当前地图的索引？按照这个例子：

const assoc = [...contacts];
assoc.splice(id, 1);
setContacts(assoc);

您可以通过从数组中查找其索引来删除该项目。

例如：

function handleDelete(id) {
   console.log("manager", id);
   const index = contacts.findIndex((x) => x.id === id);
   const newContacts = [
      ...contacts.splice(0, index),
      ...contacts.splice(index + 1),
   ];
   setContacts(newContacts);
}