-1

I'm new to react native and I'm trying to write an async function which calls an API endpoint that takes an id and returns the result of the API from the function.

Here is an example snippet of my code:

async function returnAValue(funcId) {
  let returnValueFromAPI = false;
  if (funcId !== null) {
    try {
      const response = await Api.get(
        "/metrics-result/hasRecordedToday/" + funcId
      );
      returnValueFromAPI = response.data;
      console.log("returnValueFromAPI 1", returnValueFromAPI);
      // here the correct value of true is logged "returnValueFromAPI 1 true"
    } catch (error) {
      console.log(error.response);
    }
  }
  return returnValueFromAPI;
}

console.log("func return value", returnAValue("3456"));
// outside the function above console log returns 'func return value' {"_U": 0, "_V": 0, "_W":  null, "_X": null}

Can someone explain why it doesn't return the 'true' value in the console.log outside the function ?

Any help would be appreciated

Nicholas Tower
  • 72,740
  • 7
  • 86
  • 98
Adrian Kelly
  • 1
  • `async` functions always return promises. To get the value that the promise eventually resolves to, use the promise's `.then` method, or `await` the promise. – Nicholas Tower Aug 16 '21 at 16:58
  • Anyway I can extract the value from the promise inside the function and return the actual value? I can get the value outside the function using returnAValue('345').then(function(val) {console.log(val)})...... – Adrian Kelly Aug 17 '21 at 08:36
  • Basically I need to be able to call a function, pass in a value and get back the actual result (not a promise) and check the result. Any help would be appreciated? – Adrian Kelly Aug 17 '21 at 10:33
  • It is impossible to return a value that doesn't exist yet. The whole point of promises is that they represent a *future* value. `.then` or `await` is the way that you can tell the promise "when the value is ready, run this code". Any code that needs the value must be inside a `.then` callback or after an `await`. – Nicholas Tower Aug 17 '21 at 13:04
  • Besides this I need to call the async function within a .map so for each item in the .map I need to check the result of the API and depending on the result either true/false render a different style button. I understand the .then() but its using it in .map logic as I keep getting an error. – Adrian Kelly Aug 17 '21 at 14:59
  • Error - Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead. – Adrian Kelly Aug 17 '21 at 15:18

1 Answers1

-1

You need to remember that a call to the API are things that are handled but you don't know at which point in the future there will be there, you just know that you will get the results or otherwise an error.

Check those resources also search for callback hell, or promise hell. async/await is easier to read.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Yuen Steven
  • 19
  • 2
  • Ok first link you sent I understand - thanks. I now can console log the correct value from the .then block. However I need to be able to access the value outside/globally of the .then block and the function using it. I can't use setState! Can I some how return the value from the .then block function ? – Adrian Kelly Aug 17 '21 at 11:51
  • Make a combination of both useEffect and useState so you can access the value, but dude you can use also an HTTP client, however if you are learning its ok to use the approach you are taking https://react-query.tanstack.com/ https://reactjs.org/docs/hooks-effect.html – Yuen Steven Aug 17 '21 at 13:39