Next.js路由跳转后图片列表数据丢失问题求助

问题根源 #

你在story路由中使用的fileStory初始值是空数组，且每次进入该页面都会重置为初始状态。当执行handleAddStory时，你是基于这个空数组来生成新的图片列表，然后直接覆盖localStorage中的数据——这就导致之前保存的图片记录被清空，home页面自然只能看到最新添加的那一张。

解决步骤 #

1. 让story路由的state从localStorage读取初始数据

修改story路由的state初始化逻辑，确保每次进入页面时，先加载已保存的图片列表：

const [fileStory, setFileStory] = useState(() => {
  const savedImages = localStorage.getItem("imageList");
  return savedImages ? JSON.parse(savedImages) : [];
});

2. 完善handleAddStory的边界判断（可选但推荐）

添加空文件判断，避免用户未选择文件时执行无效操作：

const handleAddStory = () => {
  if (!selectedFile) return;
  
  setFileStory((previous) => {
    const newImageList = [...previous, URL.createObjectURL(selectedFile)];
    localStorage.setItem("imageList", JSON.stringify(newImageList));
    router.push('/');
    return newImageList;
  });
  setSelectedFile(null);
};

3. 优化home路由的state初始化（可选）

将home路由的state初始化改为函数式，避免每次组件渲染都重复读取localStorage：

const [images, setImages] = useState(() => {
  const savedImages = localStorage.getItem("imageList");
  return savedImages ? JSON.parse(savedImages) : [];
});

原理说明 #

修改后，story页面的初始state会先从localStorage加载已有的图片数据，添加新图片时是在历史列表的基础上追加，而非从空数组重新构建。这样localStorage中的数据会持续累积，home页面就能展示所有已添加的图片了。

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