来自导入函数的未定义值

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 返回 undefined，但是当我调用例如 signOut 或 isUserLogged 而不是 return 我在这些函数中添加一个 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
            }
        })
    }

Answer 2

试试这个：将你的 isUserLogged 函数替换为：

export function isUserLogged(){
    return firebase.auth().onAuthStateChanged(user => !!user);
}