React删除功能异常求助：uuid生成ID与localStorage数据问题

一、uuid无法生成ID #

1. 确认已安装uuid依赖：在项目根目录执行命令

npm install uuid
# yarn 用户执行
yarn add uuid

2. 添加联系人后，可通过console.log(contacts)验证新联系人是否包含id字段，确认uuid生成逻辑正常。

二、点击删除图标删除所有联系人 #

此问题核心是部分联系人缺少唯一ID，导致过滤逻辑失效：

• 若localStorage中存储了添加uuid前的旧数据，这些数据无id字段，删除时传入的id为undefined，filter条件contact.id !== id会过滤所有项。
• 修复方式：初始化时给无ID的联系人补全ID，修改App.js中的初始化useEffect：

useEffect(() => {
  const retrieveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
  if (retrieveContacts) {
    const contactsWithId = retrieveContacts.map(contact => 
      contact.id ? contact : { id: uuid(), ...contact }
    );
    setContacts(contactsWithId);
  }
}, []);

三、刷新页面后原联系人恢复 #

当前localStorage更新逻辑存在漏洞：当联系人列表为空时，不会执行存储操作，旧数据仍保留。修改App.js中的存储useEffect：

useEffect(() => {
  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
}, [contacts]);

同时优化删除逻辑，使用函数式更新避免闭包导致的状态不一致：

const removeContactHandler = (id) => {
  setContacts(prevContacts => prevContacts.filter(contact => contact.id !== id));
};

内容的提问来源于stack exchange，提问作者Shubham Shrivastava