刷新页面后LocalStorage未存储新增数据，求助排查原因

核心问题 #

你仅在组件初始化阶段从localStorage读取数据，但新增待办项后未将更新后的数组同步回localStorage，导致页面刷新时，依旧读取旧的存储数据，新增内容自然丢失。

具体修复步骤 #

1. 添加监听todos变化的useEffect，每当todos数组更新时自动同步到localStorage：

import { useState, useEffect } from 'react';

function App() {
  // 初始化时从localStorage读取数据，无数据则用空数组兜底
  const [todos, setTodos] = useState(() => {
    const savedTodos = localStorage.getItem('todos');
    return savedTodos ? JSON.parse(savedTodos) : [];
  });

  // 监听todos变化，实时同步到localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  // 你的addTodo逻辑保持不变（确保用新数组更新状态，不直接修改原数组）
  const addTodo = (text) => {
    const newTodos = [...todos, { id: Date.now(), text, completed: false }];
    setTodos(newTodos);
  };

  // ...其余代码保持原样
}

2. 确认状态更新逻辑：你当前用展开运算符创建新数组更新todos的方式是正确的，这保证了React能检测到状态变化并重新渲染，只需补充同步localStorage的步骤即可。

额外注意事项 #

• localStorage仅支持存储字符串类型，所以必须用JSON.stringify()将数组转为字符串存储，读取时用JSON.parse()解析回数组。
• 初始化时要处理localStorage无todos键的情况，避免undefined导致渲染错误。

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