React中无法从localStorage获取数据问题排查

你的代码存在两个核心问题，导致刷新页面后localStorage中无数据可渲染：

1. 初始状态异步更新导致数据覆盖：你通过单独的useEffect在组件挂载后读取localStorage，但此时监听contacts变化的useEffect已经先把初始空数组写入localStorage，直接覆盖了之前存储的数据。
2. 状态更新依赖旧值引发滞后：添加和删除联系人时直接使用当前contacts状态，连续操作时可能因为React状态更新的异步性，导致状态不同步，无法正确写入localStorage。

修复后的代码 #

import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import ContactForm from "./ContactForm";
import ContactList from "./ContactList";

const ContactApp = () => {
  // 直接从localStorage加载初始状态，避免异步更新的覆盖问题
  const [contacts, setContacts] = useState(() => {
    const savedContacts = localStorage.getItem("contacts");
    return savedContacts ? JSON.parse(savedContacts) : [];
  });

  const addContactHandler = (formValues) => {
    if (!formValues.name || !formValues.email) {
      toast.error("Name and email are required");
      return;
    }
    // 函数式更新，基于最新状态操作
    setContacts(prev => [...prev, { ...formValues, id: Date.now() }]);
  };

  const deleteContactHandler = (id) => {
    // 函数式更新确保状态同步
    setContacts(prev => prev.filter(contact => contact.id !== id));
  };

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

  return (
    <div className="contact-app">
      <nav>
        <h1>Contact Manager</h1>
      </nav>
      <ContactForm onClick={addContactHandler} />
      <ContactList onDelete={deleteContactHandler} contacts={contacts} />
    </div>
  );
};

export default ContactApp;

关键修复说明 #

• 初始状态直接读取localStorage：用useState的函数初始化方式，组件启动时就加载本地存储的数据，避免后续空数组覆盖已有数据。
• 函数式状态更新：setContacts时传入回调函数，基于最新的状态快照操作，确保连续添加/删除时状态正确同步。
• 移除冗余的useEffect：不再需要单独读取localStorage的useEffect，简化逻辑同时避免冲突。

额外检查：请确认ContactForm组件正确收集表单的name和email值并传递给addContactHandler，建议将onClick改为onSubmit更符合表单交互语义。

内容的提问来源于stack exchange，提问作者hossein rahmati