反應原生 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} />中顯示更新的用戶。