在使用获取响应数据初始化i18next react组件时遇到困难吗?

时间:2019-04-15 15:23:30

标签: javascript i18next react-intl react-i18next

我正在使用i18next进行内部化。

用于从服务器获取数据的默认获取请求以及响应数据中可用的语言信息。根据语言信息,页面必须加载相应的语言

import i18n from 'i18next';
import { reactI18nextModule } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import translationEN from './locales/en/translation.json';
import translationDE from './locales/de/translation.json';

// the translations
let language;
function sendRequest(resources) {
  console.log('resources', resources);
  i18n
    .use(reactI18nextModule) // passes i18n down to react-i18next
    .init(
      {
        resources,
        lng: language,
        fallbackLng: 'en',
        keySeparator: false, // we do not use keys in form messages.welcome

        interpolation: {
          escapeValue: false // react already safes from xss
        }
      },
      function() {
        fetch('http://localhost:3100/getLang')
          .then(data => data.json())
          .then(res => {
            console.log(res);
            language = res.lang;
            i18n.changeLanguage(language, (err, t) => {
              if (err)
                return console.log(
                  'something went wrong loading the language',
                  err
                );
            });
          });
      }
    );
  return i18n;
}
function i18() {
  const resources = {
    en: {
      translation: translationEN
    },
    de: {
      translation: translationDE
    }
  };
  return sendRequest(resources);
}
export default i18();

语言变量最初未定义。这是i18n首次使用“ fallbackLng”变量而不是“ lng”设置init方法。之后,获取请求进入init方法的回调。那将具有需要使用的语言响应。然后,i18n changeLanguage方法将有助于更改语言。

我只是想知道如何在i18n初始化之前执行提取请求。我不喜欢先使用某些默认语言初始化i18next,然后再使用其他语言初始化的方法。当我尝试初始化i18n时,部分提取请求对我不起作用。

是否有其他方法可以先执行提取请求,然后在导出组件之前设置i18n?

预先感谢您的任何建议!

0 个答案:

没有答案