запуск функций по очереди

Question

после setState, я хочу вызвать service.logout(), затем Auth.logout() функцию,

 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)

    }
  }

но я получаю error вот так,

 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 | }

Answer 1

this.setState не возвращает «Promise», и поэтому неправильно использовать метод then для объединения операций. ссылка

Если ваш "service.logout (..)" возвращает Promise, возможно, будет работать следующий.

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());
  });
}

}

Answer 2

из https://reactjs.org/docs/

так что я думаю, что это решит вашу проблему

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

Answer 3

1. Прежде всего, не используйте componentWillMount вместо использования componentDidMount . componentWillMount собирается устареть в react17 .

2. setState не возвращает обещание, вы можете использовать обратный вызов, который будет выполняться после установки состояния.

3. В следующем примере я вызываю функцию выхода из системы при обратном вызове, которая возвращает Обещаю. Там вы можете использовать .then (), потому что эта функция возвращает обещание с помощью асинхронное ожидание

4. Вы также можете направить функцию обратного вызова в функцию асинхронного обратного вызова, используя синтаксис async .

  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;
  }

Чтобы проверить рабочий пример нажмите здесь

Answer 4

Извините, я не знаю, реагирую, но я знаю Angular. Если service.logout () возвращает Observable, то не следует ли связать метод .then() с возвращаемым значением, как это?

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