在使用i18n.use（LanguageDetector）.init（）之前，每一种语言更改都要等待api的资源数据

Question

很抱歉，如果您之前已经回答了这个问题，但是我找不到解决方案。我是反应型的初学者。

基本上，我要做的就是我拥有的语言资源不是静态的api。因此，在初始化i18n之前，我需要等待api请求完成。

我玩过async / await，并且可以正常工作。但是每次语言更改时我都需要这样做，但似乎做得不好。

请注意，我继续调用i18n.use（LanguageDetector）.init（）

因此，基本上我做了3个这样的函数（translateEn，translateAr，translateTr），每次语言更改时我都调用它们，并且它可以工作，但是以这种方式这样做很愚蠢。

再次抱歉，我觉得这应该太容易了，我正在使它变得比原来更复杂。我相信有更好的方法可以做到这一点。

//i18n.js

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import API from './apis/API'

i18n.use(LanguageDetector).init({
  // we init with resources
  resources: {
    en: {
      translations: {},
    ar: {
      translations: {}
    },
    tr: {
      translations: {}
    }
  },
  fallbackLng: "en",
  debug: true,
  ns: ["translations"],
  defaultNS: "translations",
  keySeparator: false,
  interpolation: {
    escapeValue: false, 
    formatSeparator: ","
  },
  react: {
    wait: true
  }
});

const en = {translations: {}}
const translateEn = async () => {
  const getEnLang = await API.get('translate/interface?language=1')
  getEnLang.data.data.forEach( i => {
    en.translations[i.key] = i.value
  })
  i18n.use(LanguageDetector).init({
    resources: {
      en,
      ar: {
        translations: {}
      },
      tr: {translations: {}}
    }
  })

}

translateEn()

export {i18n,translateEn}