React i18next - 从 API 获取语言首选项并根据获取的首选项初始化 i18n

Question

我正在使用 React i18next 库在我的 react 应用程序中进行语言翻译。

我需要从 API（说用户设置 api）获取语言首选项，然后我需要使用从 API 获得的语言初始化 i18n。

但是我的 i18n.js 文件首先（显然）在 API 调用被服务之前初始化。 不知道如何处理。 我正在使用反应钩子和所有功能组件。

请在我的代码下面找到，我的 index.js 已导入以下文件

// i18n.js
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEN from "./locale/en/translation.json";
import translationES from "./locale/es/translation.json";

const resources = {
    es: {
        translation: translationES,
    },
    en: {
        translation: translationEN,
    },
};

i18n.use(initReactI18next).init({
    resources,
    fallbackLng: "es",

    keySeparator: false,

    interpolation: {
        escapeValue: false,
    },
});

export default i18n;

提前致谢

Answer 1

获得用户的语言设置后，您可以通过以下方式更新语言

i18n.changeLanguage(lang)

Answer 2

您可以在初始化应用程序时从服务器获取 API，然后使用 i18n 的 API addResourceBundle将语言环境文件添加到 i18init

参考： https://www.i18next.com/overview/api#addresourcebundle