如何将当前的state设置为useState hook？

Question

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

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

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

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

Answer 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 { useSessionStorage } from 'hooks/uselocalStorage';
const [open, setOpen] = useSessionStorage(storageKey, initialConfig);

Answer 2

当您点击浏览器的刷新按钮时，您的 state 将采用其初始值，在您的情况下为null因为您没有传递任何内容。 prevState将具有相同的行为。 localStorage可以是一个解决方案。

Answer 3

您可以为打开的子菜单添加查询参数。 URL 可能看起来像这样： www.test.com/menu?nav=1 ?nav=1。 然后您可以读取nav的值并将其用于初始 state。