如何根据状态更新 react-i18next 语言？答案

【问题标题】：How to update react-i18next language based on a state?如何根据状态更新 react-i18next 语言？
【发布时间】：2021-01-31 12:42:09
【问题描述】：

我知道如何更改 react-i18next 语言，但此更改仅对当前会话或设备有效。

因此，在更改区域设置时，我首先更新 i18next 以提供即时的用户体验反馈，然后进行 api 调用以更新我数据库中的用户配置文件。

export async function useLocale(locale: Locale) {
  const { i18n } = useTranslation();
  const { updateProfile }= userService();
  i18n.changeLanguage(locale);
  return updateProfile({locale})
}

现在，如何确保 i18next 在下一次连接时从用户状态中获取语言环境？我的用户状态存储在zustand中：

export const userStore = create(() =&gt; ({ name: "Joe", locale: "en" }));

i18nconfig 是：

const languages = {
  EN: "en",
  FR: "fr",
};

const langDetectorOptions = {
  order: ["cookie", "localStorage", "navigator"],
  lookupCookie: "locale",
  lookupLocalStorage: "locale",
  caches: ["localStorage", "cookie"],
  excludeCacheFor: ["cimode"],
  checkWhitelist: true,
};

const resources = {
  en: { translation: en },
  fr: { translation: fr },
};

export default i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    lng: languages.EN,
    detection: langDetectorOptions,
    fallbackLng: languages.EN,
    keySeparator: ".",
    whitelist: [languages.EN, languages.FR],
    interpolation: { escapeValue: false },
  });

【问题讨论】：

标签： reactjs i18next

【解决方案1】：

您可能需要实现自定义语言检测器：https://www.i18next.com/misc/creating-own-plugins.html#languagedetector

【讨论】：