React Native variable getting undefined before running method

Question

I have a function that calls a method that is in my Helper.js file.

import { getTest } from '../../common/Helper';
...

myMethod() {
   ...
   const test = getTest(this.state.myID);
   console.log(test);
}
...

My Helper.js:

export const getTest = (pID) => {
  axios.get('http://myserver.com/', {
    params: {
      method: 'getVacantUnits',
      propertyID: pID
    }
  }).then((response) => {
    console.log(response.data);
    return response.data;
  }).catch((error) => {
    // handle error
    console.log(error);
    return 0;
  });
};

It is odd because my output is:

undefined
myDataContent

It looks like that "const test" is receiving undefined before the getTest being run. Why is it happening?

Thanks

What do you mean? Could you please give me an example? I'm returning: return response.data — myTest532 myTest532, Sep 12 '19 at 21:30
You're not returning the Promise that `axios.get` returns, and you're not `await`ing it in the other function. — Jared Smith, Sep 12 '19 at 21:49
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jared Smith, Sep 12 '19 at 21:49
I'm sorry, I'm new with react native. How can I return the Promise? — myTest532 myTest532, Sep 12 '19 at 21:52
Change: `axios.get('http://myserver.com/'...` to :`return axios.get('http://myserver.com/'...` — Maksym Bezruchko, Sep 12 '19 at 22:18

Stephen Phillips · Answer 1 · 2019-09-12T21:59:37.727

It's returning this first since it's not awaiting the result:

console.log(test);

2 easy ways to fix this I am showing below, first with promise:

 const test = getTest(this.state.myID).then(response=> console.log(response)).catch(err => console.log(err))

Add in return as well since you need to return from outermost function

export const getTest = (pID) => {
              return axios.get('http://myserver.com/', {
                params: {
                  method: 'getVacantUnits',
                  propertyID: pID
                }
              }).then((response) => {
                console.log(response.data);
                return response.data;
              }).catch((error) => {
                // handle error
                console.log(error);
                return 0;
              });
            };

second using async await:

// add in await
    export const getTest = async (pID) => {
      return axios.get('http://myserver.com/', {
        params: {
          method: 'getVacantUnits',
          propertyID: pID
        }
      }).then((response) => {
        console.log(response.data);
        return response.data;
      }).catch((error) => {
        // handle error
        console.log(error);
        return 0;
      });
    };

     // here you are awaiting the response before you run console.log
     const test = await getTest(this.state.myID);
     console.log(test);

You can solve this in several other ways, but I think these are the 2 easiest. Basically think about the fact that those are run synchronously and the console.log executes before the function returns, so if you "wait" then it makes it so the console.log() is dependent on the first function executing first.

Using the first option: "Undefined is not an object (evaluating '(0, _Helper. getTest(this.state.myID).then')... Using the second option, it says 'await is a reserved word' when I try to put it in getTest = await (pID) — myTest532 myTest532, Sep 12 '19 at 21:38
@myTest532myTest532 you can only `await` in an `async` function. — Jared Smith, Sep 12 '19 at 21:50
@stephen the function doesn't return anything. There's nothing to `.then` or `await`. — Jared Smith, Sep 12 '19 at 21:51
Thanks for all the downvotes everyone- I forgot to add the return here: `RETURN axios.get('http://myserver.com/', {` will update my answer — Stephen Phillips, Sep 12 '19 at 21:58

React Native variable getting undefined before running method

1 Answers1