我们可以在其他反应组件中完全完成之前使用组件吗

Question

我在 react/Javascript 中遇到一个奇怪的问题我的下面的文件调用了 backend API 中的数据并将其分配给翻译。

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;

下面几行用于调用backedn API。 apiDelegate.getTranslations() 它returns数据的形式是key value。对于前 {name:"Mahima",company:"Infosys",address:"Bangalore India"} 我在我的 react componenet 中使用这些属性使用下面的行。

i18n.t("name");

i18n.t("company") 等等

是否有可能在 apiDelegate() 完成其 execution.I 之前在我的组件中读取这些值意味着是否有可能 code 在其之前使用 i18 文件执行完毕。因为它没有反映 values。如果我使用 static files 而不是 API 那么它就可以完美地工作。

请帮助我，我很难理解这一点。能解决吗？

Answer 1

如果您需要您的消费者等到语言设置完毕，您可以 return 来自此模块的承诺。类似于：

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;

更新：这就是我可能使用它的方式。

export const useLanguage = () => {
  const [l, setL] = useState({i18next});

  useEffect(() => {
    apiDelegate.getTranslations().then((result) => {
      // ...
    i18next.changeLanguage(navigator.language);
    setL({i18next});
    });
  }, []);

  return l;
};

Answer 2

这似乎是以下内容的重复：

Code is working when reading data from file but not API

您可能想使用 i18next-http-backend：

我们可以在其他反应组件中完全完成之前使用组件吗

can we use component before its completely finished in other react component

javascript

user-interface

reactjs

react-native

react-redux