localStorage getItem()方法无法读取存储数据，请求技术协助

你的代码存在两个核心问题：

• 初始渲染覆盖localStorage数据：组件挂载后，监听contacts变化的useEffect会立即执行（因contacts初始值为[]，满足依赖触发条件），直接把localStorage中已有的数据覆盖为空数组，导致刷新后无法获取正确内容。
• 状态更新的闭包陷阱：addContactHandler中直接使用当前contacts状态，多次快速添加联系人时，会因闭包捕获旧状态导致数据丢失。

1. 直接从localStorage初始化状态 #

将useState的初始值改为从localStorage读取，避免挂载后再通过useEffect设置状态，彻底解决初始空数组覆盖已有数据的问题：

const LOCAL_STORAGE_KEY = "contacts";

// 直接从localStorage获取初始数据，解析失败则返回空数组
const initialContacts = (() => {
  try {
    return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || [];
  } catch (err) {
    console.error("解析localStorage数据失败:", err);
    return [];
  }
})();

const App = () => {
  const [contacts, setContacts] = useState(initialContacts);

  // 使用函数式更新避免闭包问题，确保拿到最新状态
  const addContactHandler = (contact) => {
    console.log(contact);
    setContacts(prevContacts => [...prevContacts, contact]);
  };

  // 仅当contacts实际变化时保存到localStorage，此时初始值已从localStorage读取，不会覆盖原有数据
  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
  }, [contacts]);

  return (
    <>
      <div className="app">
        <Header />
        <AddContact addContactHandler={addContactHandler} />
        <ContactList contacts={contacts} />
      </div>
    </>
  );
};

验证步骤 #

1. 替换代码后添加几个联系人，刷新页面检查localStorage数据是否保留，页面能否正确渲染列表。
2. 尝试多次快速添加联系人，确认所有数据都能正常保存。

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