Question

50

How can I wait until the functions finish in Reactjs?

rated 0 times [ 55] [ 5] / answers: 1 / hits: 8233 / 4 Years ago, tue, december 1, 2020, 12:00:00

Hi I am new to reactjs and I am trying to build button with a function doing some calculation by Reactjs. The logic is, first I will get two lists from database by two functions. After these 2 functions return results and setState, the calculate function will continue and do its job. But somehow the state is not being updated and it will crash. How can I secure the state is being updated before to the calculate? Thanks a lot!

Code:

export default class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      dividendList : [],

      divisorList : [],

};

}

  getDividend(){

    var self = this;

    axios.post(SERVER_NAME + 'api/getDividend', {})

        .then(function(response){

          let results = response.data;

          console.log(results)

          self.setState({ dividendList : results.data})

        })

        .catch(function(err){

          console.log(err)

        });

  } 

  getDivisor(){

    var self = this;

    axios.post(SERVER_NAME + 'api/getDivisor', {})

        .then(function(response){

          let results = response.data;

          console.log(results)

          self.setState({ divisorList : results.data})

        })

        .catch(function(err){

          console.log(err)

        });

  }



  doCal = () => {

    var self = this;

    self.getDividend();

    self.getDivisor();

    const { dividendList , divisorList} = self.state;

    # then will loop the list and do math

    # but since the state is not update, both lists are empty []

}

Tried Promise;

   getDivisor(){

    var self = this;

    return new Promise((resolve, reject) => {

      axios.post(SERVER_NAME + 'api/draw/getDivisor', {})

      .then(function(response){

        resolve(response)

      })

      .catch(function(err){

        resolve();

      });

    }) 

  }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gordonrockym

Add To Favorites

Follow

Total Points: 95

Total Questions: 115

Total Answers: 95

Location: Iraq

Member since Sat, Apr 16, 2022

2 Years ago

gordonrockym questions

1 How to display image from variable in react native

Mon, Jan 17, 22, 00:00, 2 Years ago

1 Maintain state of useFieldArray react-hook-form

Fri, Nov 12, 21, 00:00, 3 Years ago

1 Add dynamic columns with xlsx/ sheetjs

Sat, Apr 10, 21, 00:00, 3 Years ago

1 CKEditorError: Cannot read property 'name' of undefined

Tue, Feb 23, 21, 00:00, 3 Years ago

1 How can I fix the blank page issue in html2pdf.js?

Sat, Feb 15, 20, 00:00, 4 Years ago

View All

answered 4 Years ago alyssiat · Accepted Answer

I think the issue here is self.getDividend(); and self.getDivisor(); are async operations. They will take some time to complete. By the time you hit the next line const { dividendList , divisorList} = self.state;, these operations are not complete and you will end up getting empty lists.

One way to address this is using moving your doCal function logic after getDividend and getDivisor are completed. You can also execute these in parallel instead of in a sequence. I used async format instead of .then(). It is just a sysntatic sugar. You can achieve the same using .then() if you prefer that way

async function doCalc() {

  const prom1 = axios.get('https://..dividentList');

  const prom2 = axios.get('https://..divisorList');

  const results = await Promise.all([ prom1, prom2]); // wait for both promise to complete

  // look inside results to get your data and set the state

  // continue doCal logic



}

Using .then()

request1('/dividentList')

.then((res) => {

    //setState for divident

    return request2('/divisorList'); // this will return a promise to chain on

})

.then((res) => {

    setState for divisor

    return Promise.resolve('Success') // we send back a resolved promise to continue chaining

})

.then(() => {

    doCalc logic

})

.catch((err) => {

    console.log('something went wrong');

});