javascript - 导入函数中的未定义值

Question

我试图从另一个 JS“帮助程序”文件中获取 TRUE/FALSE 值，其中我有一些函数，但是当我尝试从该函数获取返回值时，我得到的只是“未定义”

//firebaseHelper.js
//js file where I have the function that I want to use in my main LoginView.jsx" file

export function isUserLogged(){
    firebase.auth().onAuthStateChanged(user =>{
        if(user){
            return true;
        }else{
            return false;
        }
    })    
}


//LoginView.jsx

import {isUserLogged, signOut} from "../../helpers/firebaseHelper";

class Login extends React.Component {
  state = {
    toDashboard: false,
  }

  componentDidMount(){
    console.log(isUserLogged());
  }

console.log 返回未定义，但是当我调用例如signOut或isUserLogged而不是返回时，我在这些函数中添加console.log，我可以在控制台中看到答案。

Answer 1

问题是 firebase.auth().onAuthStateChanged 是异步的。

您可以执行以下操作:

//LoginView.jsx

class Login extends React.Component {
  state = {
    toDashboard: false,
  }


componentDidMount = async () => {
        await firebase.auth().onAuthStateChanged(user => {
            if (user) {
                ...logged-in
            } else {
                ...logged-out
            }
        })
    }