Check if all setState methods are completed in componentDidMount

Question

I am using React's componentDidMount to carry out ajax calls operations and based on the returned results setting data to react state variable.

Now I need to use the react state variable values by calling several different methods as I want to do the operations on page load but somehow it's not working. I have also tried timeout but it's not consistent.

Anyone have any idea, what's going wrong?

Here is some sample code:

componentDidMount() {

 Helper.GetReview1Data().then(data => {
            this.setState({
                review1data: data
            }) 

        })

  Helper.GetReview2Data().then(data=> {
            this.setState({
                review2data: data
            })
   })

 this.get1Data()
 this.get2Data()
}
get1Data = () => {

console.log(this.state.review1data.map(i=>i.name))
console.log(this.state.review2data.map(i=>i.name))

}
get2Data = () => {
console.log(this.state.review2data.map(i=>i.name))
}

Possible duplicate of How do I return the response from an asynchronous call? — jonrsharpe
– jonrsharpe, Commented Sep 25, 2019 at 9:59

PeterN · Accepted Answer · 2019-09-25 12:36:45Z

If the issue is that get1Data should only be called after the state has been set from both async operations, then perhaps you could wrap each operation in a promise that resolves after setState has completed, then use Promise.all() to call get1Data after both promises have resolved, like this:

componentDidMount() {

  const promise1 = new Promise(resolve => {
    Helper.GetReview1Data().then(data => {
      this.setState({
        review1data: data
      }, resolve)
    })
  })

  const promise2 = new Promise(resolve => {
    Helper.GetReview2Data().then(data => {
      this.setState({
        review1data: data
      }, resolve)
    })
  })

  Promise.all([promise1, promise2]).then(this.get1Data)
  promise2.then(this.get2Data)
}

get1Data = () => {
  console.log(this.state.review1data.map(i=>i.name))
  console.log(this.state.review2data.map(i=>i.name))
}

get2Data = () => {
  console.log(this.state.review2data.map(i=>i.name))
}

Guruprasad · Accepted Answer · 2019-09-25 10:07:48Z

0

As this.setState is asynchronous you can use the call back functions like this

componentDidMount() {

 Helper.GetReview1Data().then(data => {
            this.setState({
                review1data: data
            }, () => { this.get1Data()}) 

        })

Helper.GetReview2Data().then(data=> {
            this.setState({
                review2data: data
            }, () =>{this.get2Data()})
   }) 
}

get1Data = () => {
    console.log(this.state.review1data.map(i=>i.name))
}

get2Data = () => {
    console.log(this.state.review2data.map(i=>i.name))
}

answered Sep 25, 2019 at 10:07

Guruprasad

7837 silver badges24 bronze badges

4 Comments

Snehal Ramteke Over a year ago

Although callback works fine. If want to use data from both states i.e. review1data and review2data in one method for e.g. get1data () it doesn't.

Snehal Ramteke Over a year ago

To clarify more I want to use something like this

get1Data = () => {     console.log(this.state.review1data.map(i=>i.name)) console.log(this.state.review2data.map(i=>i.name)) }

Guruprasad Over a year ago

As you are using both the functions in componentDidMount, both the functions data will be available after the render, where do you want those data exactly ? let me tell you the data you want is available at every other functions after componentDidMount

Snehal Ramteke Over a year ago

The data should be available after componentDidMount but when I am using state data review1data and review2data in single method e.g. get1data () which is outside of componentDidMount but called on componentDidMount it sometimes work and sometimes doesn't. As I want to use the data on page load I am calling method get1data() on componentDidMount

Antonio Pellegrini · Accepted Answer · 2019-09-25 10:08:02Z

0

the issue stems from the fact that Helper.GetReview1Data() and this.setState({review1data: data}) are asynchronous functions, but you are calling this.get1Data() synchronously afterwards. This means the console.log will execute before you receive a response and set your state.

Try placing this.get1Data() as a callback after you have set your state like so:

 Helper.GetReview1Data().then(data => {
        this.setState({
            review1data: data
        }, this.get1Data) 

    })

answered Sep 25, 2019 at 10:08

Antonio Pellegrini

3842 silver badges8 bronze badges

Comments

Mohammed Al-Reai · Accepted Answer · 2019-09-25 11:26:38Z

0

use setState({},()=>action when to do when it change state ) that will be executed after the setstate update the state as this shape

 Helper.GetReview1Data().then(data => {
        this.setState({
            review1data: data
        }, this.get1Data) 

    })

answered Sep 25, 2019 at 11:26

Mohammed Al-Reai

2,85617 silver badges19 bronze badges

Collectives™ on Stack Overflow

Check if all setState methods are completed in componentDidMount

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related