CODEWITHSUNDEEP
react-native
user938363
user938363

Reputation: 10360

Why async function in App.js returns undefined at initialization

There is a async method retrieving jwt token in my react native 0.59.5 App.js. The method is more as a wrapper and is called right after in App.js:

....
async function getToken() {
  try {
    const result = await helper.getJwtToken();
    console.log("secure store : ", result);
    if (!result) this.props.navigation.navigate("Signup");
    return result;
  } catch(err) {
    console.log("Error in retrieve jwt token : ", err.message);
    return {};
  };      

};

//socket.io
const result = getToken();
let jwt = result.password;
console.log("jwt token in App.js : ", jwt);
const socket = io(GLOBAL.BASE_URL + `?token=${jwt}`, {
  //const socket = io(GLOBAL.BASE_URL, {
    transports: ['websocket'],
    jsonp: false
  });
console.log("socket id in App.js : ", socket.id);

The jwt token is undefined after initialization:

05-20 22:47:31.660 23027 23027 D ReactNative: ReactInstanceManager.ctor()
05-20 22:47:31.904 23027 23027 D ReactNative: ReactInstanceManager.createReactContextInBackground()
05-20 22:47:31.905 23027 23027 D ReactNative: ReactInstanceManager.recreateReactContextInBackgroundInner()
05-20 22:47:43.156 23027 23027 D ReactNative: ReactInstanceManager.onJSBundleLoadedFromServer()
05-20 22:47:43.206 23027 23027 D ReactNative: ReactInstanceManager.recreateReactContextInBackground()
05-20 22:47:43.207 23027 23027 D ReactNative: ReactInstanceManager.runCreateReactContextOnNewThread()
05-20 22:47:43.346 23027 23096 D ReactNative: ReactInstanceManager.createReactContext()
05-20 22:47:43.525 23027 23096 D ReactNative: Initializing React Xplat Bridge.
05-20 22:47:43.545 23027 23096 D ReactNative: Initializing React Xplat Bridge before initializeBridge
05-20 22:47:43.572 23027 23096 D ReactNative: Initializing React Xplat Bridge after initializeBridge
05-20 22:47:43.572 23027 23096 D ReactNative: CatalystInstanceImpl.runJSBundle()
05-20 22:47:43.575 23027 23101 D ReactNative: ReactInstanceManager.setupReactContext()
05-20 22:47:43.577 23027 23101 D ReactNative: CatalystInstanceImpl.initialize()
05-20 22:47:43.593 23027 23101 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
05-20 22:47:49.001 23027 23100 I ReactNativeJS: 'secure store : ', ''
05-20 22:47:49.002 23027 23100 I ReactNativeJS: 'Error in retrieve jwt token : ', 'undefined is not an object (evaluating \'this.props.navigation\')'
 05-20 22:47:49.049 23027 23100 I ReactNativeJS: 'socket id in App.js : ', undefined

But when bringing up the initial component after initialization , the similar code (retrieving jwt token) works fine and jwt token stored is retrieved successfully and so is socket.io. How to make this async getToken code working in App.js for initialization?

Upvotes: 0

Views: 97

Answers (1)

Stefan Szakacs
Stefan Szakacs

Reputation: 46

The issue is that you do not wait for the getToken() function to finalize.

Try using await when invoking getToken(), like this:

//socket.io
const result = await getToken();
let jwt = result.password;
console.log("jwt token in App.js : ", jwt);
const socket = io(GLOBAL.BASE_URL + `?token=${jwt}`, {
  //const socket = io(GLOBAL.BASE_URL, {
    transports: ['websocket'],
    jsonp: false
  });
console.log("socket id in App.js : ", socket.id);

Upvotes: 1

Related Questions