页面刷新后localStorage数据丢失，TodoList数据持久化失败求助

问题原因 #

你的代码存在时序逻辑错误：

• 组件首次渲染时，todos 初始值是空数组，此时监听 todos 变化的 useEffect 会立刻执行，把空数组写入 localStorage，直接覆盖了之前存储的有效数据。
• 挂载阶段的 useEffect 随后读取 localStorage 数据并更新 todos，但这时候已经晚了——初始的空数组已经把原有数据覆盖了。

修复方案 #

直接在 useState 初始化时读取 localStorage，避免初始空数组触发错误写入：

// 用函数初始化 useState，仅在组件首次挂载时执行一次
const [todos, setTodos] = useState(() => {
  const storedData = window.localStorage.getItem("todoStorage");
  // 有数据则解析，无数据则用空数组
  return storedData ? JSON.parse(storedData) : [];
});

// 仅在 todos 实际变化时更新 localStorage
useEffect(() => {
  window.localStorage.setItem("todoStorage", JSON.stringify(todos));
}, [todos]);

额外优化（可选） #

如果 localStorage 中存储的数据格式异常（比如无效 JSON），可以添加异常捕获避免页面报错：

const [todos, setTodos] = useState(() => {
  try {
    const storedData = window.localStorage.getItem("todoStorage");
    return storedData ? JSON.parse(storedData) : [];
  } catch (error) {
    console.error("读取本地存储数据失败:", error);
    return [];
  }
});

内容的提问来源于stack exchange，提问作者Eduardo Scheunemann