时间戳

首页 > 解决方案 > 使用 firebase 检查 authStatechanged 后对本机导航做出反应

javascript - 使用 firebase 检查 authStatechanged 后对本机导航做出反应

问题描述

我正在尝试在 loadingScreen 上启动我的应用程序，它会检查是否有任何与 firebase 的会话，这是我尝试了这么多版本但没有任何效果的代码，在我看来这是对 JS 范围的理解不足

第 2 版

//importing 
import {f,fAuth} from '../../config'

class Loading extends React.Component {
componentDidMount(){

        f.auth().onAuthStateChanged((user)=>{console.log(user);this.nav(user) })

    }

    nav(user)
    {   
        console.log(user)
        if (user===null){
            console.log(user)
            // to login page
            this.props.navigation.navigate('auth')
        }
        else{
            console.log(user)
            // to home page
            this.props.navigation.navigate('main')
        }
    }
}

版本 1

componentDidMount(){
        f.auth().onAuthStateChanged(user=>{th.props.navigation.navigate(user ?'main':'auth')})    
    }

在配置文件中

import firebase from 'firebase';

var firebaseConfig = {
    apiKey: "AIzaSyDYcY1wXll4JI3Gb-qokG6F6KQZB5zzrkg",
    authDomain: "insta-12594.firebaseapp.com",
    databaseURL: "https://insta-12594.firebaseio.com",
    projectId: "insta-12594",
    storageBucket: "insta-12594.appspot.com",
    messagingSenderId: "898455527488",
    appId: "1:898455527488:web:6a749552a9401905de0eec5"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig)

export const  f = firebase;
export const fDb= firebase.database()
export const fAuth= firebase.auth()

标签： javascriptfirebasereact-nativefirebase-authentication

解决方案

在几次尝试使用 a 之后state，我观察到状态不会立即更新 例如：

state={
      userState:'ha'
      }  

componentDidMount(){
      console.log('up',this.state.userState)
      f.auth().onAuthStateChanged(user=>this.setState({ userState: 'hi' }, () => 
                                       console.log('middle',this.state.userState)))
      console.log('bottom',this.state.userState)
    }

输出将是：

up ha
down ha
middle hi

知道了这个事实，我试图在this.setState 像这样的回调中调用该函数：

state={
      userState:'ha'
    }  
componentDidMount(){
      f.auth().onAuthStateChanged(user=>this.setState({ userState: user }, () => 
       this.props.navigation.navigate(this.state.userState===null?'auth':'main')))     
    }

推荐阅读