反应原生 Firebase 不保留用户信息

Question

这是一个普通的用户登录应用程序。当用户登录时，他们应该会看到主屏幕，但由于某种原因根本无法进入主屏幕。完整的 App.js 代码如下。

我有一个分支条件用户？转到主页：或仅显示登录/注册选项。用户变量的值为“未定义”。这是否意味着他的价值观没有坚持？

import 'react-native-gesture-handler';
import React, { useEffect, useState } from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { LoginScreen, HomeScreen, RegistrationScreen } from './src/screens'
import {decode, encode} from 'base-64'
import { firebase } from './src/firebase/config'


if (!global.btoa) {  global.btoa = encode }
if (!global.atob) { global.atob = decode }

const Stack = createStackNavigator();

export default function App() {

  const [loading, setLoading] = useState(true)
  const [user, setUser] = useState(null)
  
  

  useEffect(() => {
    const usersRef = firebase.firestore().collection('users');
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        console.log(user)
        console.log('user is logged in  ')
        usersRef
          .doc(user.uid)
          .get()  
          .then((document) => {
            const userData = document.data()
            setLoading(false)
            setUser(userData)
          })
          .catch((error) => {
            setLoading(false)
          });
      } else {
        console.log('user is not logged in')
        setLoading(false)
      }
    });
  }, []);
  
  
  console.log(user)

  if (loading) {
    return (
      <></>
    )
  }

  return (  
    <NavigationContainer>
      <Stack.Navigator>
        { user ? (
          <Stack.Screen name="Home">
            {props => <HomeScreen {...props} extraData={user} />}
          </Stack.Screen>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Answer 1

为了清楚起见，第 6 行的第一个 console.log(user) 会生成所有用户变量的转储。第二个 console.log(user) 产生“未定义”。

这是预期的行为。

当应用/页面重新加载时，Firebase 会自动从本地存储中恢复用户凭据。但这需要它调用服务器，这需要一些时间，因此是异步发生的。在此过程中，您的主代码仍在继续，并且您的第二个日志（正确）显示此时当前用户仍为 undefined。

然后，当用户凭据被恢复时，您的onAuthStateChanged 回调被执行，它设置user 并正确记录用户的属性。而且由于你在那里调用setUser(userData)，这也会触发React重新渲染组件，以便它可以在<HomeScreen {...props} extraData={user} />中显示更新的用户。