Me enfrento a un problema extraño en react/Javascript Mi archivo a continuación llama a los datos de la backend API -end y los asigna para su traducción.
import i18next from 'i18next'; import apiDelegate from '../src/components/Utils/Common/api.js'; const LanguageDetector = require('i18next-browser-languagedetector'); const initReactI18next = require('react-i18next'); var output; //API call apiDelegate.getTranslations().then((result) => { output = JSON.stringify(result); const tr_fr = 'translation: ' +JSON.parse(output) ; alert(tr_fr); i18next .use(LanguageDetector) .use(initReactI18next) .init({ resources: { en: tr_fr, }, fallbackLng: 'fr', }); i18next.changeLanguage(navigator.language); }); export default i18next; Las siguientes líneas se utilizan para llamar a la API respaldada. apiDelegate.getTranslations() devuelve datos en forma de key value . para ex {name:"Mahima",company:"Infosys",address:"Bangalore India"} y uso estas propiedades en mi react componenet usando la línea de abajo.
i18n.t("name"); i18n.t("company") etc.
¿Es posible que estos valores se lean en mi componente antes de que apiDelegate() termine su ejecución? Quiero decir, ¿hay alguna posibilidad de code esté usando el archivo i18 antes de que termine su ejecución? porque no refleja los values . en lugar de API si uso static files entonces funciona perfectamente.
Por favor ayúdenme, estoy luchando mucho para entender esto. se puede resolver?
Si necesita que sus consumidores esperen hasta que se haya configurado el idioma, puede devolver una promesa de este módulo en su lugar. Algo como:
let ready = false; const start = () => { return new Promise((res) => { if (ready) return res(i18next); apiDelegate.getTranslations().then((result) => { output = JSON.stringify(result); const tr_fr = 'translation: ' + JSON.parse(output); i18next .use(LanguageDetector) .use(initReactI18next) .init({ resources: { en: tr_fr, }, fallbackLng: 'fr', }); i18next.changeLanguage(navigator.language); }); ready = true; return res(i18next); }); }; export default start;Actualización: así es como probablemente lo usaría.
export const useLanguage = () => { const [l, setL] = useState({i18next}); useEffect(() => { apiDelegate.getTranslations().then((result) => { // ... i18next.changeLanguage(navigator.language); setL({i18next}); }); }, []); return l; };Esto parece ser un duplicado de:
Es posible que desee utilizar i18next-http-backend: cómo incorporar datos API en i18next en lugar de un archivo estático