Resolving Promise Array

Question

I use ReactJS and axios I try to GET data customer

React: 16.5.2
axios: 0.18.0

I have a class with constructor:

constructor(props) {
  super(props);
  this.state = {
    reactTable: reactTableData(),
    reactBootstrapTable: reactBootstrapTableData(),
    dataCustomer: customerData(),
};

method customerData() :

export function customerData(){
  // axios get  
  return axios.get("my/url")
  .then(res => {
    let data = res.data.data;
    console.log(data);
    return data
  })
  .catch(err => {
    console.log(err);
  })
}

when I am console.log(this.state); I got Promise data like this:

I still new with ReactJS and I hope you can help me,
thanks.

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) — VLAZ, Jan 14 '20 at 09:18
Either `await customerData()` or use Promises if you want an actual array. However, that would lead to the constructor being asynchronous which is usually a bad practice. You may want to leave the promises in and let the object interact with them as Promises. — VLAZ, Jan 14 '20 at 09:20
state change won't be reflected on the component, Try to do ths api call in component lifecycle — Ajay Ghosh, Jan 14 '20 at 09:21

score 2 · Accepted Answer · answered Jan 14 '20 at 09:22

That's pretty much normal, because you return a promise from your customerData function. I'd solve your problem like this:

constructor(props) {
  super(props);
  this.state = {
    reactTable: reactTableData(),
    reactBootstrapTable: reactBootstrapTableData(),
    dataCustomer: [],
  }
  this.initCustomerData()
}

async initCustomerData() {
  this.setState({
    customerData: await customerData()
  })
}

score 0 · Answer 2 · answered Jan 14 '20 at 09:21

Your customerData will return the Promise only which needs to be resolved. That promise is getting set in dataCustomer.

What you can do is, call the method customerData inside another method which can be triggered from constructor or any other lifecycle method. Resolve the promise and then call the setState method to set the desired value.

score -1 · Answer 3 · answered Jan 14 '20 at 09:27

-1


constructor(props) {
  super(props);
  this.state = {
    reactTable: reactTableData(),
    reactBootstrapTable: reactBootstrapTableData(),
  };

  this.initCustomerData();
}

initCustomerData = () => {
  customerData().then((data) => {
   this.setState({ dataCustomer: data })
  });
}

answered Jan 14 '20 at 09:27

Stefan Solopa

1
2

This is almost same as Ruslan's answer, but does not require ES2017 support. – Jonas Berlin Jan 14 '20 at 09:31
1

agree, i posted it 2 seconds after Ruslan's answer :) , but i saw that customerData use `then` and thought that the author use older version – Stefan Solopa Jan 14 '20 at 09:44

Resolving Promise Array

3 Answers3