React.js中如何复用数组变量分页面在localStorage存储图片URL且互不干扰

你的核心问题是同一个数组实例被不同页面复用，导致切换页面时旧数据残留。要实现不同页面独立维护图片列表，返回原页面时恢复数据，需要把数组和当前页面绑定，从localStorage按需读取、写入。

修正方案代码 #

import { useState, useEffect } from 'react';

// 假设 current 是当前页面标识（比如数字或字符串）
function YourComponent({ current }) {
  // 用 useState 管理当前页面的图片数组，初始值从 localStorage 读取
  const [imageStorageArr, setImageStorageArr] = useState(() => {
    const savedData = localStorage.getItem(`imageSrc${current}`);
    return savedData ? JSON.parse(savedData).imageSrc : [];
  });

  // 页面切换时，重新从 localStorage 加载对应页面的图片数据
  useEffect(() => {
    const savedData = localStorage.getItem(`imageSrc${current}`);
    setImageStorageArr(savedData ? JSON.parse(savedData).imageSrc : []);
  }, [current]);

  // 图片数组变化时，保存到对应页面的 localStorage 键
  useEffect(() => {
    const imageLSDataModel = {
      page: current,
      imageSrc: imageStorageArr
    };
    localStorage.setItem(`imageSrc${current}`, JSON.stringify(imageLSDataModel));
  }, [current, imageStorageArr]);

  // 点击添加图片的方法示例
  const handleAddImage = (src) => {
    setImageStorageArr(prev => [...prev, src]);
  };

  // 组件渲染逻辑...
}

关键改动说明 #

• 用 useState 替代 useMemo：useMemo 是缓存计算值，不会响应页面切换重新初始化。useState 配合初始化函数，能在组件挂载时直接读取对应页面的本地数据。
• 页面切换时重新加载数据：监听 current 变化，每次切换页面都从 localStorage 拉取该页面的图片列表，确保数组初始状态正确。
• 数组变化时即时保存：数组更新后自动同步到 localStorage，返回原页面时能读取到之前的存储数据。

原代码问题点 #

• useMemo(() => [], []) 只会在组件首次挂载时创建一次空数组，后续页面切换不会重新生成新数组，导致旧页面的数据一直残留。
• 没有在页面切换时读取对应页面的本地存储，数组无法恢复之前的状态。

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