React TodoList应用：刷新后状态重置，localStorage读取长度为0求助

代码问题分析 #

1. getLocalStorage函数存在冗余与语法问题
   • 重复调用localStorage.getItem("todos")，且return (list = JSON.parse(...))中的list未定义，属于无效赋值操作
2. TodoWrapperLocalStorage设计错误
   • 作为组件却未返回任何JSX内容，也未暴露状态与更新函数，导致其他组件无法复用该状态逻辑，状态变更无法同步到localStorage
   • useEffect的条件判断不合理：当待办列表为空时，不会更新localStorage，删除所有待办后旧数据会残留；且todos为数组类型，todos != null的判断完全多余
3. 不符合React Hooks规范
   • 状态复用逻辑应封装为自定义Hook（以use开头），而非无返回值的组件，否则无法在其他组件中正确关联状态

修复代码 #

修正后的localStorage工具函数与自定义Hook #

import { useState, useEffect } from "react";

const getLocalStorage = () => {
  const todos = localStorage.getItem("todos");
  // 存在则解析JSON，不存在返回空数组
  return todos ? JSON.parse(todos) : [];
};

// 封装为自定义Hook，供其他组件调用
export const useTodoLocalStorage = () => {
  const [todos, setTodos] = useState(getLocalStorage());

  // 监听todos变化，同步到localStorage（无论数组是否为空）
  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);

  // 返回状态与更新函数
  return { todos, setTodos };
};

在主组件中使用Hook #

import { useTodoLocalStorage } from "./路径/到你的Hook文件";

const TodoApp = () => {
  const { todos, setTodos } = useTodoLocalStorage();

  // 示例：添加待办逻辑
  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, completed: false }]);
  };

  // 其他逻辑：删除、切换完成状态等

  return (
    <div className="todo-app">
      {/* 你的待办事项UI */}
    </div>
  );
};

export default TodoApp;

关键注意点 #

• 所有状态变更必须通过setTodos触发，确保useEffect能监听到变化并同步到localStorage
• 自定义Hook必须以use开头，遵循React Hooks规则，保证状态与组件正确关联
• 移除useEffect的条件判断，确保空数组也能同步到localStorage，避免旧数据残留

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