使用Cookie实现页面重载后Ant Design下拉框保留选中的i18next语言设置

解决方法 #

你现有代码存在两个核心问题：

1. Cookie存储逻辑错误：你当前是固定写入两个分别以ru、en为键的Cookie，没有存储用户实际选中的语言值，应该统一存一个标识用户偏好语言的Cookie
2. Select组件使用固定的defaultValue，属于非受控组件，没有绑定当前选中的语言值，页面重载后自然会重置为默认值

修改核心分为3步：

• 修正Cookie存储逻辑：切换语言时存储用户选中的语言值到统一Cookie键，删除原来提前写死的Cookie写入逻辑
• 组件初始化时读取Cookie中存储的偏好语言，作为Select的初始绑定值
• 将Ant Design Select改为受控组件，用value属性绑定当前选中值，替换原来的固定defaultValue

修改后的完整代码如下：

const Option = Select.Option;
function ChangeLanguageDropdown({}) {
   const {i18n} = useTranslation();
   // 初始化时从Cookie读取之前保存的语言，没有的话用i18n当前默认语言
   const savedLang = Cookies.get('preferred_language') || i18n.language;

   const changeLanguage = (lang) => {
       i18n.changeLanguage(lang);
       // 切换语言时把选中的语言存入Cookie，有效期7天
       Cookies.set('preferred_language', lang, { expires: 7 });
   };

   return (
       <div>
           {/* 把Select改成受控组件，value绑定当前选中的语言，需要占位符可以加placeholder="Language" */}
           <Select value={savedLang} style={{ width: 110}} onChange={changeLanguage}>
              <Option value="ru">{i18next.t("Русский")}</Option>
              <Option value="en">{i18next.t("English")}</Option>
           </Select>
       </div>
   )
}

补充说明 #

如果你已经给i18n配置了初始化时自动从Cookie读取偏好语言，那savedLang可以直接用i18n.language，不需要重复读取Cookie，保证两边状态一致即可。如果需要首次进入时下拉框显示“Language”占位符，可以给Select加placeholder="Language"属性，同时判断如果没有保存的语言时将value设为undefined即可。

内容的提问来源于stack exchange，提问作者Vasya Pupkin