firebase.auth().signOut() 在单击注销后未重定向回 mainNav答案

【问题标题】：firebase.auth().signOut() not redirecting back to mainNav after clicking logoutfirebase.auth().signOut() 在单击注销后未重定向回 mainNav
【发布时间】：2021-11-11 04:13:12
【问题描述】：

我正在使用 react native 和 firebase 构建一个简单的 react native 应用程序，并在尝试注销用户时遇到一个小问题，目前当按下注销时，它不会重定向回登录页面。

首页

<Text>Home Screen</Text>
            <Button title="Sign Out" onPress={signOut} />

退出功能

    const signOut = async () => {
        firebase.auth().signOut();
    }

主导航

const MainNav : FC = () => {
    const [user, setUser] = useState<firebase.User | null>(null);

    const bootstrap = () => {
        firebase.auth().onAuthStateChanged(_user => {
            if(_user){
                setUser(_user)
            }
        })
    }

    

    useEffect(() => {
        bootstrap()
    }, [])


    return (
        <NavigationContainer>
            {user !== null ? <AppStack /> : <AuthStack />}
        </NavigationContainer>
    )
}

export default MainNav;

授权栈

import React, { FC } from 'react';
import {createStackNavigator} from '@react-navigation/stack'
import {SignUp, Login} from '../screens'
const {Navigator, Screen} = createStackNavigator();

const AuthStack : FC = () => {
    return (
        <Navigator screenOptions={{headerShown: false}}>
            <Screen name="signup" component={SignUp}/>
            <Screen name="login" component={Login}/>
        </Navigator>
    )
} 

export default AuthStack;

应用堆栈

const AppStack : FC = () => {
    return (
        <Navigator screenOptions={{headerShown: false}}>
            <Screen name="home" component={Home}/>
            <Screen name="dashboard" component={Dashboard}/>
        </Navigator>
    )
} 

export default AppStack;

【问题讨论】：

标签： android ios reactjs firebase react-native

【解决方案1】：

那是因为您实际上忽略了注销事件：

const bootstrap = () => {
  firebase.auth().onAuthStateChanged(_user => {
    if(_user) { // <-- this will be null when logged out!
      setUser(_user)
    }
  })
}

此外，您不应该像您在这里一样包装onAuthStateChanged 函数并忽略它的返回值（它是取消订阅函数）：

useEffect(() => {
  bootstrap()
}, [])

您应该使用（或它的变体）：

useEffect(() => firebase.auth().onAuthStateChanged(_user => setUser(_user)), [])

上面的行使用来自firebase.auth() 的最新值更新user，并在卸载组件时正确取消订阅侦听器。

【讨论】：