CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-redux
LogaKrishnan
LogaKrishnan

Reputation: 501

running functions one after other in react

after setState, i want to call service.logout(), then Auth.logout() function, 

 componentWillMount() {
    if (!(this.Auth.loggedIn())){
      this.props.history.replace('/login');
    } else {
      this.setState({token : this.Auth.getToken()}).then(service.logout(this.state.token)).then( this.Auth.logout())
      // console.log('token',this.state.token)

    }
  }

but im getting error like this,

 TypeError: Cannot read property 'then' of undefined
Logout.componentWillMount
src/components/auth/Logout.js:20
  17 | if (!(this.Auth.loggedIn())){
  18 |   this.props.history.replace('/login');
  19 | } else {
> 20 |   this.setState({token : this.Auth.getToken()}).then(service.logout(this.state.token)).then( this.Auth.logout())
  21 |   // console.log('token',this.state.token)
  22 |  
  23 | }

Upvotes: 1

Views: 6163

Answers (4)

Miroslav Savovski
Miroslav Savovski

Reputation: 2500

this.setState does not return "Promise" and that's why it is not proper to use "then" method to chain the operations. ref.

If your "service.logout(..)" returns Promise than probably following one will work. 

componentWillMount() {
if (!(this.Auth.loggedIn())){
  this.props.history.replace('/login');
} else {
  const authToken = this.Auth.getToken();
  this.setState({token : authToken }, () => { 
       service.logout(authToken).then( this.Auth.logout());
  });
}

}

Upvotes: 2

Himanshu Gupta
Himanshu Gupta

Reputation: 430

  1. First of all, don't use componentWillMount instead use componentDidMount. componentWillMount is going to deprecate in react17.

  2. setState don't return a promise, rather you can use a callback which will execute after state has been set.

  3. In below example I call logout function in call back which returns a promise. There you can use .then() because that function returns a promise with help of async await

  4. You can also direct make callback function to a async callback function using async syntax.

  componentDidMount() {
    if (false){
      this.props.history.replace('/login');
    } else {
      this.setState({token : 'one'}, () => {
        this.logout(this.state.token).then(() => {
          // Do whatever you want
          console.log('three');
        });
      });
    }
  }

 logout = async (token) => {
     const a = new Promise((resolve, reject) => {
          setTimeout(() => { console.log('two'); return resolve("done!"); }, 1000)
     });

     return await a;
  }

To check the working example click here

Upvotes: 1

Naor Tedgi
Naor Tedgi

Reputation: 5699

from https://reactjs.org/docs/

enter image description here

so i think this would solve your problem 

      this.setState({token : this.Auth.getToken()} , async () => {
       await service.logout(this.state.token) 
       await this.Auth.logout()
      });

Upvotes: 3

Sergej
Sergej

Reputation: 2186

Sorry, I don't know react, but I know Angular. If the service.logout() returns an Observable, then shouldn't you bind .then() method with it return value, like this?

this.setState({token : this.Auth.getToken()}).then(service.logout(this.state.token).then( this.Auth.logout()))

Upvotes: -1

Related Questions