异步调用不评估反应中的条件

Question

我有一个基于状态呈现不同组件的验证器文件。问题是以下代码不起作用。我需要让代码等到组件检查条件 if 条件。所以基本上它应该等待这个条件来评估

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

问题是它开始呈现登录页面，尽管我使用了异步功能。

Answer 1

一个 async 函数总是 return 一个承诺，所以你不能以同步的方式使用它 return 的东西。

您可以改为检查用户是否在 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 />;
    }
  }
}

异步调用不评估反应中的条件

aysnchronous calls not evaluating condition in react

javascript

reactjs

aws-amplify