Export componenent after ajax call finishes in React

Question

I want to export a component after the ajax call finishes. Here is the below code, the output of below code is

exporting 1

exporting 3

exporting 4

exporting 2

But I want to execute it sequentially, My desired output is

exporting 1

exporting 2

exporting 3

exporting 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;

Is there anyway in react, I can perform this ?

Thanks,

You export a symbol when it's initially parsed, not after running asynchronous code. You need to export a loader that loads languages with a method that returns a promise. If you need data in the symbol, you need to generate the data, not fetch it at runtime. If using typescript, you can import JSON directly. See https://stackoverflow.com/questions/49996456/importing-json-file-in-typescript — Ruan Mendes, Jan 28 '20 at 15:13
To do which? I gave you two options? Please search, try it out, and ask a separate question if it doesn't work. We do not typically write snippets, we fix something that is not working. but here's the idea for a loader class `class Loader{load(){ return fetch(....).then()} } ` There are lots of options, so you need to try something. — Ruan Mendes, Jan 28 '20 at 15:16

Bill Metcalf · Answer 1 · 2020-01-28T15:23:44.587

No, there is no such thing as an asynchronous export in javascript. If you can be more clear about what you are trying to accomplish I might be able to suggest a possible approach, but as is I don't even understand how this has anything to do with React specifically

EDIT based on OP's reply:

try something like this...

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

and then in any component anywhere within your app you can access the locals like so:

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>
}

That ajax call is getting translations lists. We want to use that translations in all over the project — Rockers Niloy, Jan 28 '20 at 15:10
Okay I see, well there is still no such thing as an async export where you can directly accomplish this, but assuming this is a React application, you can do the fetch in your top level `` component and then provide it to the rest of the React component tree through a [context](https://reactjs.org/docs/context.html), I will edit my answer with a potential solution — Bill Metcalf, Jan 28 '20 at 15:17

Export componenent after ajax call finishes in React

1 Answers1