I am facing one strange issue in react/Javascript My below file calls the data from backend API and assign it for translation.
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;
Below lines is used for calling backedn API.
apiDelegate.getTranslations()
it returns data in the form of key value.
for ex {name:"Mahima",company:"Infosys",address:"Bangalore India"}
and I use these properties in my react componenet using below line.
i18n.t("name");
i18n.t("company") etc
Is it possible that these values are getting read in my component before apiDelegate() finished its execution.I mean is there a possibility code is using i18 file before its execution finished. because its not refelecting the values. instead of API if I use static files then it works perfectly.
Please help me , I am badly struggling to understand this. can it be resolved?
If you need your consumers to wait until the language has been setup, you could return a promise from this module instead. Something like:
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;
Update: This is how I would probably use it.
export const useLanguage = () => {
const [l, setL] = useState({i18next});
useEffect(() => {
apiDelegate.getTranslations().then((result) => {
// ...
i18next.changeLanguage(navigator.language);
setL({i18next});
});
}, []);
return l;
};
This seems to be a duplicate of:
You may want to use i18next-http-backend: how to incorporate API data in i18next instead of static file