React点击图标后localStorage数据存储异常问题求助

问题分析 #

1. 首次点击无法添加数据：React的setState是异步操作，点击时直接使用当前menu状态写入localStorage，此时menu还未完成更新，导致第一次存储的仍是旧数组（初始为空），第二次点击时才会存储更新后的数据。
2. 取消点赞时清空所有数据：使用menu.includes(item)判断对象是否存在，由于对象是引用类型，即使内容相同，不同引用的对象也会被判定为不存在，导致取消点赞时错误执行添加逻辑，或因判断逻辑异常触发意外清空。

修复步骤及代码修改 #

1. 初始化状态时从localStorage加载数据 #

组件挂载时先读取localStorage中的数据，保证页面刷新后点赞状态不丢失：

const [menu, setMenu] = useState(() => {
  const savedMenu = localStorage.getItem('menu');
  return savedMenu ? JSON.parse(savedMenu) : [];
});
// 可选：如果保留iconStates，初始化时从localStorage同步状态
const [iconStates, setIconStates] = useState(() => {
  const savedMenu = localStorage.getItem('menu');
  const initialStates = {};
  if (savedMenu) {
    JSON.parse(savedMenu).forEach(item => {
      initialStates[item._id] = true;
    });
  }
  return initialStates;
});

2. 修改点击事件逻辑，使用函数式更新并正确同步localStorage #

利用setMenu的函数式更新获取最新状态，同时在状态更新后写入localStorage，并且通过_id判断对象是否存在：

<RiHeart3Fill
  className={iconStates[item._id] ? 'heart active' : 'heart'}
  onClick={() => {
    setMenu(prevMenu => {
      // 通过_id判断是否已存在，替代引用比较
      const isExist = prevMenu.some(menuItem => menuItem._id === item._id);
      const newMenu = isExist 
        ? prevMenu.filter(menuItem => menuItem._id !== item._id) 
        : [...prevMenu, item];
      // 状态更新后立即同步到localStorage
      localStorage.setItem('menu', JSON.stringify(newMenu));
      return newMenu;
    });
    // 用函数式更新确保获取最新的图标状态
    setIconStates(prevStates => ({
      ...prevStates,
      [item._id]: !prevStates[item._id]
    }));
  }}
/>

3. 可选：简化状态维护（推荐） #

可以去掉单独的iconStates状态，直接通过menu计算点赞状态，避免两份状态不同步：

// 直接通过menu数组计算当前项是否被点赞
const isLiked = menu.some(menuItem => menuItem._id === item._id);

// 图标className改为：
className={isLiked ? 'heart active' : 'heart'}

// 点击事件中也无需维护iconStates，只更新menu即可
onClick={() => {
  setMenu(prevMenu => {
    const isExist = prevMenu.some(menuItem => menuItem._id === item._id);
    const newMenu = isExist 
      ? prevMenu.filter(menuItem => menuItem._id !== item._id) 
      : [...prevMenu, item];
    localStorage.setItem('menu', JSON.stringify(newMenu));
    return newMenu;
  });
}}

关键说明 #

• 函数式更新setMenu(prevMenu => ...)确保获取最新的状态值，规避异步更新导致的旧值问题。
• 使用some通过_id判断对象存在性，彻底解决引用类型比较的逻辑错误。
• 状态更新后立即写入localStorage，保证内存状态与本地存储始终一致。

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