React：如何让两个组件共用localStorage实现数据追加不覆盖？

问题核心在于当前每个组件独立维护自身的menu状态，初始化时未读取localStorage的已有数据，且更新时直接用自身状态覆盖存储，导致多组件间数据不同步、互相覆盖。下面提供两种实用解决方案：

方案1：直接基于localStorage读写并同步状态 #

修改组件代码，确保每次操作都基于localStorage的最新数据，同时监听存储变化同步组件状态：

const [menu, setMenu] = useState(() => {
  // 初始化时优先读取localStorage的已有数据
  const savedMenu = localStorage.getItem('menu');
  return savedMenu ? JSON.parse(savedMenu) : [];
});

const addToMenu = (e, selectedItem) => {
  // 先获取localStorage中的最新数据，避免用组件自身可能过期的状态
  const currentMenu = JSON.parse(localStorage.getItem('menu')) || [];
  let newMenu;
  
  if (currentMenu.includes(selectedItem)) {
    newMenu = currentMenu.filter(item => item !== selectedItem);
  } else {
    newMenu = [...currentMenu, selectedItem];
  }
  
  setMenu(newMenu);
  localStorage.setItem('menu', JSON.stringify(newMenu));
};

// 监听storage事件，当其他组件/标签页修改数据时同步当前组件状态
useEffect(() => {
  const handleStorageChange = (e) => {
    if (e.key === 'menu') {
      setMenu(e.newValue ? JSON.parse(e.newValue) : []);
    }
  };
  window.addEventListener('storage', handleStorageChange);
  return () => window.removeEventListener('storage', handleStorageChange);
}, []);

关键改进： #

• 初始化状态直接从localStorage读取，确保组件加载时拿到最新数据
• 更新操作基于localStorage的最新数据处理，避免因组件状态过期导致的覆盖
• 通过storage事件监听外部修改，保证多组件状态同步

方案2：用React Context统一管理状态（适合中大型项目） #

将menu的状态和操作逻辑抽离到Context中，所有组件共享同一数据源，从根源避免数据不同步问题：

1. 创建MenuContext #

// MenuContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const MenuContext = createContext();

export const MenuProvider = ({ children }) => {
  const [menu, setMenu] = useState(() => {
    const savedMenu = localStorage.getItem('menu');
    return savedMenu ? JSON.parse(savedMenu) : [];
  });

  // 自动同步状态到localStorage
  useEffect(() => {
    localStorage.setItem('menu', JSON.stringify(menu));
  }, [menu]);

  // 监听外部存储修改
  useEffect(() => {
    const handleStorageChange = (e) => {
      if (e.key === 'menu') {
        setMenu(e.newValue ? JSON.parse(e.newValue) : []);
      }
    };
    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, []);

  const addToMenu = (selectedItem) => {
    setMenu(prev => {
      if (prev.includes(selectedItem)) {
        return prev.filter(item => item !== selectedItem);
      } else {
        return [...prev, selectedItem];
      }
    });
  };

  return (
    <MenuContext.Provider value={{ menu, addToMenu }}>
      {children}
    </MenuContext.Provider>
  );
};

export const useMenu = () => useContext(MenuContext);

2. 在组件中使用Context #

// 食品分类组件A
import { useMenu } from './MenuContext';

const FoodCategoryA = () => {
  const { menu, addToMenu } = useMenu();

  return (
    <div>
      {/* 示例：点击按钮添加/移除食品 */}
      <button onClick={(e) => addToMenu('分类A-食品1')}>
        {menu.includes('分类A-食品1') ? '移除' : '添加'}
      </button>
    </div>
  );
};

// 食品分类组件B同理
import { useMenu } from './MenuContext';

const FoodCategoryB = () => {
  const { menu, addToMenu } = useMenu();

  return (
    <div>
      <button onClick={(e) => addToMenu('分类B-食品1')}>
        {menu.includes('分类B-食品1') ? '移除' : '添加'}
      </button>
    </div>
  );
};

优势： #

• 状态统一管理，所有组件共享同一数据源，无覆盖风险
• 逻辑集中，后续修改维护更便捷
• 天然支持跨组件状态同步

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