反应 - 从两个不同的组件添加到同一个 localStorage

Question

我有两个不同的组件，它们显示不同类别的食物，并尝试使用 localStorage 为它们实现一个保存按钮。 我在他们两个上都有这个代码

const [menu, setMenu] = useState([]);

  const AddtoMenu = (e,selectedItem) => {
    let newMenu;
    if (menu.includes(selectedItem)) {
      // If the item is already in the array, remove it
      newMenu = menu.filter(item => item !== selectedItem);
    } else {
      // If the item is not in the array, add it
      newMenu = [...menu, selectedItem];
    }
    setMenu(newMenu);
  }

  useEffect(() => {
    localStorage.setItem('menu', JSON.stringify(menu));
  }, [menu]);

现在发生的情况是它们不共享相同的存储空间，它们根据我保存的最后一个项目相互替换。我怎样才能让它们都添加到最后添加的项目中？

Answer 1

将状态和状态设置器放在一个组件中，该组件是两者的祖先，并将其传递给两个子组件。

const [menu, setMenu] = useState([]);
const addToMenu = (e,selectedItem) => {
  // ...
};
useEffect(() => {
  localStorage.setItem('menu', JSON.stringify(menu));
}, [menu]);

return (
  <div>
    <Child1 {...{ menu, addToMenu }} />
    <Child2 {...{ menu, addToMenu }} />
  </div>
);

const Child1 = ({ menu, addToMenu }) => {
  // etc

如果setMenu在addToMenu之外的子项中使用，您也可以将其传递下去。

Answer 2

要将两个组件都添加到同一个 localStorage，您可以使用两个组件都可以访问和更新的共享状态。 一种方法是创建一个单独的组件来管理菜单的状态，并使用 useContext 挂钩将状态提供给其他组件。

以下是如何进行设置的示例：

1. 为菜单状态创建上下文：

 const MenuContext = createContext();

2. 创建一个管理菜单状态并将其提供给其他组件的组件：

const MenuProvider = (props) => { const [menu, setMenu] = useState([]);

useEffect(() => { localStorage.setItem('menu', JSON.stringify(menu)); }, [menu]);

返回 ( <MenuContext.Provider value={[menu, setMenu]}> {props.children} </MenuContext.Provider> ); }

3. 将您的组件包装在 MenuProvider 组件中：

4. 在每个组件中，使用 useContext 挂钩获取菜单状态和 setMenu 函数：

   const [菜单, setMenu] = useContext(MenuContext);

   const AddtoMenu = (e, selectedItem) => { 让 newMenu; if (menu.includes(selectedItem)) { // 如果项目已经在数组中，则将其删除 newMenu = menu.filter(item => item;== selectedItem), } else { // 如果项目不在阵列。 添加它 newMenu = [..,menu; 选定项]; } 设置菜单（新菜单）； }

这样，您的两个组件都可以访问相同的菜单状态，并可以使用 setMenu 函数向其添加项目。 状态也将保存在 localStorage 中，因此当页面刷新时，菜单仍将包含添加的项目。