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

Question

I am using React i18next library to do language translations in my react app.

I need to fetch the language preference from API (Say User settings api) and then i need to initialize i18n with the language i got from API.

But my i18n.js file initializes first (obviously) before API call being served. Not sure how to handle this. I am using react hooks and all functional components.

Please find below my code and my index.js has the below file imported

// 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;

Thanks in advance

Answer 1

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

i18n.changeLanguage(lang)

Answer 2

You can fetch API from the server when init app and then use API addResourceBundle of i18n to add locale file to i18init

Ref: https://www.i18next.com/overview/api#addresourcebundle