如何将当前状态设置为 useState 挂钩？答案

【问题标题】：How to set the current state to the useState hook?如何将当前状态设置为 useState 挂钩？
【发布时间】：2021-11-17 20:14:44
【问题描述】：

我有一个状态来跟踪打开子菜单时的状态，并在单击另一个菜单项时切换它。它是这样的：

    const [open, setOpen] = useState();
    const toggle = (id) => setOpen(id);

    onClick={() => toggle(item.navId)}

当我单击浏览器中的刷新按钮时，当前打开的子菜单会关闭。我相信这是因为初始状态是空的。如何在页面重新加载/刷新后保持当前子菜单打开。我一直在环顾四周，我真的不确定是否应该使用prevState 或如何在我的情况下实施它。非常感谢任何提示或指向解决方案的方向。谢谢。

【问题讨论】：

将选中的值存储到localStorage
要么将抽屉的状态存储在父组件中。
@DerekWilliams 刷新浏览器时父级不会丢失数据
使用useLocalStorage钩子会是这样吗？感谢您的提示。

标签： reactjs

【解决方案1】：

您需要在浏览器刷新时持久化数据。正如其他人所说，使用 LocalStorage 是一个不错的选择。我总是使用我为这种情况编写的自定义钩子：

import { useEffect, useRef, useState } from 'react';

export function useLocalStorage(key, defaultValue) {
  const [state, setState] = useState(() => {
    const valueInLocalStorage = window.localStorage.getItem(key);
    if (valueInLocalStorage) {
      return JSON.parse(valueInLocalStorage);
    }
    return defaultValue;
  });

  const prevKeyRef = useRef(key);

  useEffect(() => {
    const prevKey = prevKeyRef.current;
    if (prevKey !== key) {
      window.localStorage.removeItem(prevKey);
    }
    prevKeyRef.current = key;
    window.localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState];
}

然后你可以导入它并使用它

import { useLocalStorage } from 'hooks/uselocalStorage';
const [open, setOpen] = useLocalStorage(storageKey, initialConfig);

【讨论】：

天啊！我认为我永远无法使用这样的自定义钩子自己完成它。我会永远保留这个钩子。非常感谢。它就像一个魅力。我真的很感谢分享这么好的东西。干杯。
别担心，这都是关于学习和经验的，我们都会在这个过程中进行研究和学习:) 祝你好运！很高兴我能提供帮助

【解决方案2】：

您可以为打开的子菜单添加查询参数。 URL 可能如下所示：www.test.com/menu?nav=1。然后您可以读取nav 的值并将其用于初始状态。

【讨论】：

谢谢。我会尝试它和其他方法。
这不是使用 react 实现此目的的正确方法。