Экспорт компонентов после завершения вызова ajax в React

Question

Я хочу экспортировать компонент после завершения вызова ajax. Ниже приведен код, выводимый ниже код:

экспорт 1

экспорт 3

экспорт 4

экспорт 2

Но я хочу выполнить его последовательно, Мой желаемый вывод -

экспорт 1

экспорт 2

экспорт 3

экспорт 4

import appLocaleData from "react-intl/locale-data/en";
import enMessages from "../locales/en_US.json";
import config from "config";

const lang = new Object();
console.log( " exporting 1" );

fetch(`${config.api.languageUrl}english.json`, {
  method: "GET",
  headers: {
    "Content-Type": "application/octet-stream"
  }
})
.then(res => res.json())
.then(json => {
Object.assign(lang, json);
console.log("json->", json);
console.log("lang->", lang);
console.log(lang._VIEW);
console.log( "exporting 2" );
});

console.log( "exporting 3" );

const EnLang = {
  messages: {
   ...lang
 },
 locale: "en-US",
 data: appLocaleData
};

console.log( "exporting 4" );

export default EnLang;

Есть ли что-то в реакции, я могу это сделать?

Спасибо,

Answer 1

Нет, в javascript нет такого понятия, как асинхронный экспорт. Если вы можете быть более ясным о том, что вы пытаетесь выполнить, sh Я мог бы предложить возможный подход, но, как и я, я даже не понимаю, как это связано с React конкретно

РЕДАКТИРОВАТЬ на основе ответа ОП:

попробуйте что-то вроде этого ...

export const LocalsContext = React.createContext([]);
const App = () => {
  ...

  const [locals, setLocals] = useState([]);
  useEffect(() => {
    fetch(...)
      .then(...)
      .then(localsList => setLocals(localsList)
  }, []);

  return (
    <LocalsContext.Provider value={locals}>
      ...
    </LocalsContext.Provider>
  )
}

export default App

и затем в любом компоненте в любом месте вашего приложения вы можете получить доступ к местным жителям, например, так:

const MyComponent = () => {
  /*
   * will re-render whenever the locals updates,
   * i.e., will render once with [] as the value, then once the
   * data is fetched it will render again with the actual locals value
   */
  const locals = useContext(LocalsContext);

  return <div>some component</div>
}