React setstate callback does not work after initial use

Question

I have a function that, when initialized, takes a previously set state and uses it to make an api call with axios:

 _onRefresh = () => {
    this.setState({ refreshing: true }, () => {
      axios.get(this.state.currentPath)
        .then(res=>{
          console.log(res.data)
          this.props.loadCards(res.data) 
        })
        this.setState({refreshing: false})
    });
  }

I can see that the promise is never completed, and that a response is not given.

However, on the first use after the page loads, the function works correctly; it's only on subsequent usage that it does not work.

When the get request does not work, I've taken the path that's been stored in state, made a request in postman, and received a valid result.

You're doing `this.setState({refreshing: false})` right after you fire off the call to axios, not after it finishes. — Joseph Sible-Reinstate Monica, Sep 15 '19 at 17:47

score 1 · Answer 1 · answered Sep 15 '19 at 18:29

1

you should cancel the refreshing in the finally block

get(...)
.then(...)
.catch(...)
.finally(() => this.setState({refreshing: false}))

answered Sep 15 '19 at 18:29

cucaracho

174
6

Note that `Promise.prototype.finally` is only available in current browsers (no IE 11 or even edge 17) and node 10.x+. – Jared Smith Sep 15 '19 at 18:31
I tried this and it did not work. Thank you for your response. @JaredSmith – schoenbl Sep 16 '19 at 00:13

score 0 · Answer 2 · answered Sep 15 '19 at 18:20

Does this fix the issue?

_onRefresh = () => {
this.setState({ refreshing: true }, () => {
  axios.get(this.state.currentPath)
    .then(res=>{
      console.log(res.data)
      this.props.loadCards(res.data)
      this.setState({refreshing: false}) // moved this line into the then block
    })    
});

}

Rishav Kumar · Answer 3 · 2019-09-17T06:10:46.273

0

Try this

_onRefresh =async () => {
    this.setState({ refreshing: true }, () => {
   await axios.get(this.state.currentPath) //you might need to handle promises to get this working.
        .then(res=>{
          console.log(res.data)
          this.props.loadCards(res.data) 
        })
        this.setState({refreshing: false})
    });
  }

edited Sep 17 '19 at 06:10

answered Sep 16 '19 at 09:21

Rishav Kumar

4,979
1
17
32

I receive the error: `Can not use keyword 'await' outside an async function` – schoenbl Sep 16 '19 at 14:35
https://stackoverflow.com/questions/37104199/how-to-await-for-a-callback-to-return Please refer here this will resolve the issues – Rishav Kumar Sep 17 '19 at 06:10

React setstate callback does not work after initial use

3 Answers3