如何基于状态更新react-i18next语言？

Question

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

因此，在更改区域设置时，我首先更新i18next以提供即时的ux反馈，然后进行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(() => ({ 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 },
  });

​

Answer 1

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