使用 cookie 重新加载页面后将所选语言保留在下拉列表中

Question

问题是：

有一个登陆页面，一个用ant设计添加的语言切换，具体来说，通过Select / Option。翻译是通过 i18react lib 完成的。 因此，有必要在重新加载页面时，将所选语言显示在下拉菜单中，而不是重置为默认语言。 我知道通过 document.cookie 可以做什么。但是怎么做？好吧，我会把语言放在cookies中。然后，如何将它们拧入此 Select 以便在重新启动时保存所选语言的显示？

我的代码在这里，我不知道该怎么做。

const Option = Select.Option;
function ChangeLanguageDropdown({}) {
   const {i18n} = useTranslation();
   const changeLanguage = (lang) => {
       i18n.changeLanguage(lang);
   };

   Cookies.set('ru', 'Русский', { expires: 7 });
   Cookies.set('en', 'English', { expires: 7 });
   

   return (

       <div>
           <Select defaultValue={"Language"} style={{ width: 110}} onChange={changeLanguage}>
              <Option value="ru">{i18next.t("Русский")}</Option>
              <Option value="en">{i18next.t("English")}</Option>
           </Select>
               </div>

Answer 1

const {useState} = React
const { Select } = antd

const { Option } = Select;

const ChangeLanguageDropdown  = ({}) => {
   const [lang, setLang] = useState('en' /* Cookie.get('path.to.cookie') */);
   const changeLanguage = (lang) => {
     setLang(lang);
     /* Cookie.set('path.to.cookie', lang); */
     /* call i18n.changeLanguage(lang); */
   };

   return (
     <div><div>{lang}</div>
    <Select defaultValue={lang} style={{ width: 500}}  onChange={changeLanguage}>
     <Option value="ru">"Русский"</Option>
     <Option value="en">"English"</Option>
   </Select>
</div>);
}

ReactDOM.render(<ChangeLanguageDropdown />, document.body)

请注意，我已经删除了所有与 i18n 相关的代码以及 Cookie 库（您的 Codepen 设置是#R%T$）。下一次，从一些实际可行的示例开始（例如https://codepen.io/mugiseyebrows/pen/ExyJJQQ?editors=1111）