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

Posted 2023-02-16

【中文标题】反应原生 Firebase 不保留用户信息

【英文标题】：react native firebase not persisting user info

【发布时间】：2022-01-23 04:42:42

【问题描述】：

这是一个普通的用户登录应用程序。当用户登录时，他们应该会看到主屏幕，但由于某种原因根本无法进入主屏幕。完整的 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>
  );

【问题讨论】：

你从console.log(user)得到什么日志输出？

它未定义..

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

【参考方案1】：

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

这是预期的行为。

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

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

【讨论】：

感谢您的回复。这完全有道理。但是，在我的情况下，它不会触发 组件。知道为什么会这样吗？

我建议设置断点并在调试器中运行代码。当你这样做时，你的setUser(userData) 会被触发吗？如果是这样，并且如果 userData 与以前不同，那真的应该触发 React 来更新 UI。