如何在 React 的 localStorage 中设置用户的首选语言

Question

我正在尝试通过 localStorage 设置网站用户的首选语言。 该站点的默认语言是英语，但如果用户从语言下拉列表中选择西班牙语，则 localStorage 中的 userLanguage 应设置为“es”。 我正在关注这篇文章： https : //www.carlrippon.com/react-drop-down-data-binding/以获取有关下拉组件的参考。

我的问题是如何在功能组件中将 localStorage 设置为用户的选择。

我熟悉如何开始设置，直到这一点：

const [userLanguage, setUserLanguage] = useState();
useEffect(() => {
  localStorage.setItem("userLanguage", )
})

我的困惑是如何处理“userLanguage”之后的第三行

下拉选择器组件如下：

const Languages = () => {
  const languages = [
    { value: "en", label: "EN" },
    { value: "es", label: "SP" },
  ];

  return (
    <>
      <LanguagesContainer>
        <Select
          id="language-selector"
          instanceId="language-selector"
          inputId="language-selector"
          options={languages}
          defaultValue={languages[0]}
          className="language-selector"
          classNamePrefix="language-selector"
        />
      </LanguagesContainer>
    </>
  );
};

Answer 1

尝试这样做：

const [userLanguage, setUserLanguage] = useState();
   useEffect(() => {
    localStorage.setItem("userLanguage", userLanguage ? userLanguage : '')
    }, [userLanguage])