页面刷新后LocalStorage中待办事项消失问题求助

你的代码存在关键逻辑顺序问题：

• 组件初始化时，todoArr 的初始值是空数组。
• 挂载阶段会先执行依赖 todoArr 的保存 useEffect，把空数组写入 LocalStorage，直接覆盖了之前保存的内容。
• 之后才执行读取 LocalStorage 的 useEffect，但此时 LocalStorage 已经被清空，自然读不到原有数据。

把从 LocalStorage 读取数据的逻辑移到 useState 的初始化函数里，让组件一开始就能拿到保存的 todos，避免先写入空数组覆盖数据：

// 初始化时直接从 LocalStorage 读取数据
const [todoArr, setTodoArr] = useState(() => {
  if (typeof window !== "undefined") {
    const savedTodos = localStorage.getItem("Todos");
    try {
      return savedTodos ? JSON.parse(savedTodos) : [];
    } catch (error) {
      console.log(error);
      return [];
    }
  }
  return [];
});

// add and update/save todo function
const updateOrSaveTodo = (e: React.FormEvent) => {
  e.preventDefault();
  if (todo.trim()) {
    if (editIndex !== null) {
      const updated = [...todoArr];
      updated[editIndex] = todo;
      setTodoArr(updated);
      setEditIndex(null);
    } else {
      setTodoArr([...todoArr, todo]);
    }
    setTodo('');
  }
};

// 保存到 LocalStorage 的逻辑保留
useEffect(() => {
  localStorage.setItem("Todos", JSON.stringify(todoArr));
}, [todoArr]);

// 删掉原来的读取 LocalStorage 的 useEffect，因为初始化已经处理了

• useState 的初始化函数只会在组件首次挂载时执行一次，不会重复触发，完美适配从 LocalStorage 读取初始值的场景。
• 保留依赖 todoArr 的保存 useEffect，可以确保每次 todoArr 更新时，最新数据都会同步到 LocalStorage。

内容的提问来源于stack exchange，提问作者Moosa Haroon