Estaba leyendo el valor de la translation del archivo almacenado en la carpeta pública de la aplicación de reacción. archivo fueron almacenados en

pero dado que nuestros data se pueden cambiar en cualquier momento, estamos almacenando datos en la base de datos. en el momento de la carga, después de detectar el idioma de los datos del navegador de ese idioma, se llamará desde la API y se usará directamente. por lo que el siguiente código de archivo funciona perfectamente.

 import i18next from 'i18next'; const LanguageDetector = require("i18next-browser-languagedetector"); const initReactI18next = require("react-i18next"); import { TRANSLATIONS_EN } from "../public/locales/en/en.js"; import { TRANSLATIONS_IT } from "../public/locales/it/it.js"; i18next .use(LanguageDetector) .use(initReactI18next) .init({ resources: { en:TRANSLATIONS_EN, it:TRANSLATIONS_IT, }, fallbackLng: 'fr' }); i18next.changeLanguage(navigator.language); export default i18next;

ahora, en lugar de esto, estoy usando el siguiente código en el que llamo a la API para leer los data y se asignará directamente a la variable . no escribiremos datos en el archivo en el código a continuación en lugar de files estáticos que he llamado API. si imprimo la salida de la API o el archivo, son exactamente iguales. pero no puedo entender por qué esto no funciona. ¿Puede ser asynchronous el motivo?

 import i18next from 'i18next'; import React from 'react'; import TransFile from './TransFile.js'; import apiDelegate from '../src/components/Utils/Common/api.js'; const LanguageDetector = require('i18next-browser-languagedetector'); const initReactI18next = require('react-i18next'); import { TRANSLATIONS_EN } from '../public/locales/en/en.js'; //just for verification import makeGetRequest from './abc.js'; apiDelegate.getTranslations().then((result) => { output = JSON.stringify(result); const tr_en = 'translation: ' +JSON.parse(output) ; alert(tr_en); //this and below alert produce same result. alert(TRANSLATIONS_EN)); i18next .use(LanguageDetector) .use(initReactI18next) .init({ resources: { en: tr_en, //if I write TRANSLATIONS_EN here it works }, fallbackLng: 'fr', }); i18next.changeLanguage(navigator.language); }); export default i18next;

No puedo entender el problema extraño. ¿Hay alguna forma mejor de manejar? Encontré i18n-http-backend api pero a partir de esto no sé cómo llamar a restAPI . Por favor ayuda.