如何將當前的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。