如何将接口数据嵌入到I18NEXT中而不是静电文件中 [英] how to incorporate API data in i18next instead of static file

问题描述

translation的不同language的Reaction中，我已将文件保存在public folder中。现在我需要从API获取数据。我可以调用API并获取数据。我还知道如何使用translation。但我无法将API调用合并到转换代码文件中。

接口。

 axios
      .get(
        'http://localhost:8080/file_download/' +
          navigator.lnaguage
      )
      .then((res) => {
        console.log(res.data);
        });
      });
  }

下面是我对静电文件的翻译代码。 对于TRANSLATIONS_FR中的EX，我需要存储API的输出。

i18file.js：-

import i18next from 'i18next';

const LanguageDetector = require('i18next-browser-languagedetector');
const initReactI18next = require('react-i18next');
import xios from 'axios';

import { TRANSLATIONS_FR } from './../public/locales/fr/fr.js';
import { TRANSLATIONS_EN } from '../public/locales/en/en.js';

i18next
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: TRANSLATIONS_EN,
      fr: TRANSLATIONS_FR,
    },
    fallbackLng: 'fr',
  });

i18next.changeLanguage(navigator.language);

export default i18next;

我必须将API代码插入到i18file.js文件中。如果browser检测到en，则我必须调用english并在resources中赋值。如果浏览器检测到frech，则我必须执行同样的操作。

请您推荐一下。我将编写代码。

编辑1：- 我在下面写code，它正在抛error。 下面的API将从database发送json data。此数据我not storing in file，但直接使用。

http://localhost:8080//file_download/en
Below is the code

import i18next from 'i18next';
import Backend from 'i18next-http-backend';

const LanguageDetector = require('i18next-browser-languagedetector');
const initReactI18next = require('react-i18next');

 i18next
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    backend: {
       loadPath: 'http://localhost:8080//file_download/en' //this is API path which will return result.
    }, 
    resources: {
      en:res.data //I need to assign here.
    },
    fallbackLng: 'fr',
  });
  i18next.changeLanguage(navigator.language);
export default i18next;

如何将API合并到上述code中并将其data用于(例如在en语言中)。

推荐答案

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import backend from 'i18next-http-backend';
import api from "../api";

 var lang=navigator.language;

let loadResources= apiDelegate.getTranslations(lang);
const backendOptions = {
  loadPath: 'http://localhost:8080/code/'+lang, 
  request: (options, url, payload, callback) => {
    try {
      loadResources.then((result) => {
        callback(null, {
          data: result,
          status: 200, 
        });
      });
    } catch (e) {
      console.error(e);
      callback(null, {
        status: 500,
      });
    }
  },
};

i18n
  .use(LanguageDetector)
  .use(backend)
  .init({
    backend: backendOptions,
    fallbackLng: "fr",
    debug: false,
    load:"languageOnly",
    ns: ["translations"],
    defaultNS: "translations",
    keySeparator: false, 
    interpolation: {
      escapeValue: false, 
      formatSeparator: ","
    },
    react: {
      wait: true
    }
});
i18n.changeLanguage(navigator.language);
export default i18n;

这篇关于如何将接口数据嵌入到I18NEXT中而不是静电文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！