Waiting for request to finish before performing operation ReactJS

I have an axios call inside my react application

  }).then(res =>
       this.setState({
           name: res.data.fname,
           sName: res.data.sname,
           percentage: res.data.percentage,
           result: res.data.result,
           showResult: true,
           type: this.typeHandler(res.data.percentage)
       }));
       }

after the request is done AND the state is set, I want to set input forms to blank. So i tried this

  }).then(res =>
       this.setState({
           name: res.data.fname,
           sName: res.data.sname,
           percentage: res.data.percentage,
           result: res.data.result,
           showResult: true,
           type: this.typeHandler(res.data.percentage)
       })
       ).then(
       this.setState(prevState =>{
          return {inputName: '', inputSname: ''} 
       }))
       }

using another promise, being resolved after the first, but the forms are still set to blank before the request state is being set. I have tried using a callback as well, but the first .then() method, does not accept a second argument. How can I solve this?

Upvotes: 1

Views: 34

Answers (1)

Naor Tedgi
Naor Tedgi

Reputation: 5699

setState can get a call back

https://reactjs.org/docs/react-component.html#setstate

setState(updater[, callback])

instead of another then pass this callback to setState

Upvotes: 1

Related Questions