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

Answer 2

尝试一下：将您的isUserLogged函数替换为：

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

导入函数的未定义值

2 个答案: