асинхронные вызовы не оценивают состояние в реакции - PullRequest
Новая
       11

асинхронные вызовы не оценивают состояние в реакции

0 голосов
/ 16 ноября 2018

У меня есть файл аутентификатора, который на основе состояния отображает различные компоненты.Проблема в том, что следующий код не работает.Мне нужно заставить код ждать, пока компонент проверит условие if condition.Поэтому в основном следует дождаться, пока это условие оценит 

isSignedIn() === true

И на основании этого условия принять соответствующее решение.Любая помощь приветствуется. 

import Auth from '@aws-amplify/auth'

export default class Authenticator extends Component {
  isSignedIn = async () => {
    let isUserAuthenticated
    try {
      const userSession = await Auth.currentSession()
      if(userSession.idToken != null) {
        isUserAuthenticated = true
      } 
    }
    catch (error) {
      isUserAuthenticated = false
    }
    return isUserAuthenticated
  }

  render() {
    if(isSignedIn() === true) {
      return null
    }
    else {
      return <SignIn/>
    }
  }
}

Проблема в том, что он начинает отображать страницу, хотя я использовал асинхронную функцию.

1 Ответ

0 голосов
/ 16 ноября 2018

Функция async всегда возвращает обещание, поэтому вы не можете использовать то, что оно возвращает синхронно.

Вместо этого вы можете проверить, прошел ли пользователь аутентификацию в componentDidMount, поместить результат в состояние компонента и использовать его для рендеринга.

Пример 

import Auth from "@aws-amplify/auth";

export default class Authenticator extends Component {
  state = {
    signedIn: null
  };

  componentDidMount() {
    this.checkUserStatus();
  }

  checkUserStatus = async () => {
    try {
      const userSession = await Auth.currentSession();
      if (userSession.idToken != null) {
        this.setState({ signedIn: true });
      }
    } catch (error) {
      this.setState({ signedIn: false });
    }
  };

  render() {
    const { signedIn } = this.state;

    if (signedIn === null || signedIn) {
      return null;
    } else {
      return <SignIn />;
    }
  }
}
...