在頁面刷新 React Remix 上堅持 select 選項

Question

我有一個 select 有 2 個選項（ en，no ），可以切換語言 onChange。

我將選定的語言存儲到localStorage 。 因為我使用的是Remix ，我不能簡單地訪問 localStorage，因為服務器端渲染，所以我使用：

if (typeof window !== 'undefined') {
    const localLanguage = localStorage.getItem('language');
}

Select組件：

<select
  name="language"
  id="language-select"
  defaultValue={language}
  onChange={e => changeLanguageHandler(e.target.value)}
>
  <option value="no" label="NO">
    Norwegian
  </option>
  <option value="en" label="EN">
    English
  </option>
</select>

翻譯function：

export function useLocalTranslation() {
  const [language, setLanguage] = React.useState(() => {
     // react lazy initial state 
     // ( i think i should be using lazy initial state, because of the serverside rendering
    if (typeof window !== 'undefined') {
      const initialState = localStorage.getItem('language') ?? 'no';
      return initialState;
    }
  });
  const no = useNoTranslations();

  React.useEffect(() => {
    const savedLanguage = localStorage.getItem('language');
    if (savedLanguage) {
      setLanguage(savedLanguage);
    }
  }, []);

  const t = React.useCallback(
    (key: TKey) => {
      if (key === '0') return '0';

      if (typeof window !== 'undefined') {
        const currentLanguage = localStorage.getItem('language');

        if (currentLanguage === 'no') {
          // console.log(currentLanguage);
          return no?.[key as string] ?? en[key as TranslationsKeys] ?? key;
        }
        // console.log(currentLanguage);
      }
      return en[key as TranslationsKeys] ?? key;
    },
    [no],
  );

  function changeLanguageHandler(lang: string) {
    setLanguage(lang);
    localStorage.setItem('language', lang);
  }

  return { t, language, changeLanguageHandler };
}

我的目標是在頁面刷新時保存並持久保存所選選項，現在當我刷新頁面時，它會重置為 NO（挪威語）

Answer 1

我想你可以通過給出 value 屬性而不是 defaultValue 來解決這個問題。