0

I am new to promises and async/await in react. I have been reading but still, I don't understand why the promise from my getDate() method doesn't resolve.

I have been tying many solutions but it all ends the same, with an unresolved promise. Here is the code I'm using.

async getData() {
  await this.syncLedgerSum(
    "http://localhost:5000/webapi/getorders"
  ).then(response => this.setState({ items: response }));

  //this works, state.items is displayed on browser console
  //console.log("State Items in getData is : ", this.state.items);
  return this.state.items;
}

async syncLedgerSum(URL) {
  const response = await fetch(URL, {
    method: "GET"
  });
  console.log("syncLedgerSum Response: ", response);

  const json = await response.json();
  console.log("syncLedgerSum json: ", json);
  return json;
}

async componentDidMount() {
    console.log("Component Did mount: ");
    let data = await this.getData();
    if (data) console.log("Items in Component Did mount is : ", data);
}

The image above shows the logs from the code I'm using.

enter image description here

I don't know why the request doesn't finish. How can I store the data into state.items to render that information?

B.Crz
  • 59
  • 8
  • Your `getData` function doesn't `return` anything, so `data` is always falsy and the if block will never run. The request finishes just fine. – Bergi Dec 13 '19 at 18:01
  • @Bergi I added `return this.state.items; ` on `getData()` and still has the same result. – B.Crz Dec 13 '19 at 18:04
  • Does this answer your question? [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) – Agney Dec 13 '19 at 18:05
  • Then no, I can't see why you could log it but the returned value is not available in `componentDidMount`. Btw, you really shouldn't call `setState` and then immediately read the value, you should just `await` the response and access that. Then call `setState` at the end of your chain. – Bergi Dec 13 '19 at 18:08

2 Answers2

0

Because of how you're handling the response. See a working codepen.

With await you don't have to use .then to handle the promise response.

async getData() {
  const response = await this.syncLedgerSum(
    "http://localhost:5000/webapi/getorders"
  )

  this.setState({ items: response })
  //this is not a sync call, so you can either await or use the response instead but setState should trigger another render. not sure what you need this for. 

  return response;
}
caiocpricci2
  • 7,714
  • 10
  • 56
  • 88
-2

you can install axios with npm install axios or yarn add axios

 getData() {      
   axios.get("http://localhost:5000/webapi/getorders")
   .then(function (response) {
     console.log(response)
     this.setState({ items: response })
   })
   .catch(function (error) {
      console.log(error)
     this.setState({ items: [] })
   })
}

in componentDidMount you call the function getData()

Mas dem
  • 97
  • 1
  • 1