页面刷新后LocalStorage数据被替换为空数组，求问题排查

算力阿峰

2026-8-10

问题排查与修复

问题根源

你的代码在页面刷新时会清空LocalStorage数据，核心原因是组件挂载时的执行顺序导致旧数据被覆盖：

组件初始化时，data被设为空数组[]
依赖data的第二个useEffect立即触发，把空数组写入LocalStorage，直接覆盖了之前保存的有效数据
随后第一个useEffect才从LocalStorage读取数据，但此时读到的已经是刚写入的空数组，最终页面显示为空

修复方案

直接在useState初始化时读取LocalStorage数据，替代第一个useEffect，彻底避免挂载时的空数组覆盖问题：

import { useState, useEffect } from 'react';
import { nanoid } from 'nanoid';

type NoteType = {
  id: string;
  text: string;
};

const YourComponent = () => {
  // 初始化时直接从LocalStorage读取数据，跳过空数组初始值的写入
  const [data, setData] = useState<NoteType[]>(() => {
    const savedNotes = window.localStorage.getItem("notes");
    return savedNotes ? JSON.parse(savedNotes) : [];
  });

  // 仅在data实际变化时写入LocalStorage
  useEffect(() => {
    window.localStorage.setItem("notes", JSON.stringify(data));
  }, [data]);

  const handleNoteSave = (text: string, id: string) => {
    const updatedNote = data.map((note) => {
      if (note.id === id) {
        return { ...note, text };
      }
      return note;
    });
    setData(updatedNote);
  };

  const handleNoteAdd = () => {
    setData((prevState) => [...prevState, { text: "", id: nanoid() }]);
  };

  // 组件其他渲染逻辑...
  return <div>{/* 你的JSX结构 */}</div>;
};

export default YourComponent;