页面刷新时Local Storage数据丢失？React笔记应用存储问题求助

你的问题出在组件初始渲染的执行顺序：

1. 组件挂载时，useState先把notes初始化为空数组[]
2. 第一个依赖notes的useEffect会立即执行，把空数组存入Local Storage，直接覆盖了之前保存的数据
3. 接着第二个useEffect才读取Local Storage，但此时里面已经是空数组，自然读不到之前的笔记

修复方案 #

把从Local Storage读取数据的逻辑移到useState的初始化中，彻底避免初始阶段的误覆盖：

// 初始化时直接从Local Storage读取历史数据作为state初始值
const [notes, setNotes] = useState(() => {
  const savedData = window.localStorage.getItem('react-notes-app-data');
  return savedData ? JSON.parse(savedData) : [];
});

// 仅在notes实际变化时，同步更新Local Storage
useEffect(() => {
  window.localStorage.setItem('react-notes-app-data', JSON.stringify(notes));
}, [notes]);

为什么这样有效？ #

• useState的初始化函数仅在组件首次渲染时执行一次，直接读取历史笔记作为初始列表，不会被后续操作干扰
• 只有当用户真正修改笔记（添加/编辑/删除）导致notes状态变化时，才会触发useEffect将新数据存入Local Storage，完全规避了初始阶段的覆盖问题

内容的提问来源于stack exchange，提问作者Abhinil Nath