Неопределенное значение из импортированной функции

Question

Я пытаюсь получить значение TRUE / FALSE из другого вспомогательного файла JS, где у меня есть некоторые функции, однако, когда я пытаюсь получить возвращаемое значение из этой функции, все, что я получаю, это "undefined"

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