React.js中localStorage存储数据刷新后丢失问题求助

你的问题核心是组件挂载时序导致localStorage被空数组覆盖：

• 初始useState把notes设为空数组
• 依赖notes的第二个useEffect会在组件挂载后立即执行，将空数组写入localStorage，直接覆盖了之前存储的有效数据
• 等第一个读取localStorage的useEffect执行时，即便读到旧数据，也会被后续的空数组存储操作覆盖，最终下次刷新只能读到空数据

修复方案一（推荐：直接初始化state） #

把localStorage的读取逻辑移到useState的初始化函数里，从根源避免挂载时的覆盖问题：

const [notes, setNotes] = useState(() => {
  const savedNotes = localStorage.getItem('react-notes-app-data');
  // 有存储数据就解析，没有就用空数组兜底
  return savedNotes ? JSON.parse(savedNotes) : [];
});

// 移除第一个读取localStorage的useEffect

useEffect(() => {
  localStorage.setItem('react-notes-app-data', JSON.stringify(notes));
  setDisplayNotes(notes);
}, [notes]);

修复方案二（给存储逻辑加判断） #

保留原有代码结构，给第二个useEffect添加条件，避免初始空数组覆盖已有数据：

const [notes, setNotes] = useState([]);

useEffect(() => {
  const savedNotes = localStorage.getItem('react-notes-app-data');
  if (savedNotes != null) { 
    setNotes(JSON.parse(savedNotes)); 
  }
}, []);

useEffect(() => {
  // 只有当notes不是初始空数组时才执行存储操作
  if (notes.length > 0) {
    localStorage.setItem('react-notes-app-data', JSON.stringify(notes));
  }
  setDisplayNotes(notes);
}, [notes]);

两种方案都能解决刷新后数据丢失的问题，第一种逻辑更简洁，还能减少一次useEffect的执行。

内容的提问来源于stack exchange，提问作者Kevin Quora