Question

我正在尝试清除一个呼叫，以了解我的用户是否登录。重要的是要记住onAuthStateChanged侦听器是异步的，一旦与Firebase建立连接便会触发初始状态

问题是当我尝试拨打新电话时，该消息仅出现在日志中，我必须取消usseEffect中的所有订阅和异步任务，该怎么办？

import React, { useState, useEffect } from 'react';
import { View, Text,StyleSheet, Alert,TouchableOpacity, ActivityIndicator, Image } from 
'react-native';
import auth from '@react-native-firebase/auth';
import {
GoogleSignin,
GoogleSigninButton,
statusCodes,
} from '@react-native-community/google-signin';

GoogleSignin.configure()

  export default function BoasVindas({navigation})
    {
      // Set an initializing state whilst Firebase connects
      const [initializing, setInitializing] = useState(true);
      const [user, setUser] = useState();
      const [logado, setlogado] = useState(false);


      // Handle user state changes
     console.log("Usuario =:",user);
    function onAuthStateChanged(user) {
     setUser(user);
     if (initializing) setInitializing(false);
 
   }

function SignOut()
  {
  
      auth()
      .signOut()
      .then(() => {
          Alert.alert('Deslogado');
      })
      setInitializing(true)

      // if(user)
      // {
      //   await GoogleSignin.revokeAccess();
      //   await GoogleSignin.signOut();
      //   setUser(null);
       
      // }

     
        navigation.navigate('Acess');
  

   }

   useEffect(() => {
 const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
 
  return () => {subscriber} ;
 }, []);

 if (initializing) return null;

 if(!user)
 { 
  return(
 <View style={{flex: 1,justifyContent: 'center', alignItems: 'center', backgroundColor: 
 '#191919'}}>
    <ActivityIndicator size="large" color="#9E9E9E"/>
   </View>
   );

  }



  return (
 <View style={styles.container}>
   <View style={styles.viewUser}>
      <Text style={styles.boasvindas}>Boas vindas </Text>
      <Image
    style={styles.tinyLogo}
    source={{
      uri: user.photoURL,
    }}
  />
      <Text style={styles.nameUser}>{user.displayName}</Text>
   </View>

   <TouchableOpacity style={styles.SignOut}
   onPress={ SignOut}>
       <Text style={styles.sair}> Sign Out</Text>
   </TouchableOpacity>
 </View>
    );


  

   }
 const styles = StyleSheet.create({
  container: {
  backgroundColor: '#1C1C1C',
  flex: 1,

  
},
boasvindas: {
  fontFamily: 'BebasNeue-Regular',
  color: 'white',
  fontSize: 40,
},
viewUser: {
  marginTop: 20,
  alignItems: 'center',

},
tinyLogo: {
  width: 50,
  height: 50,
  borderRadius: 100,
},
nameUser: {
  marginTop: 10,
  fontSize: 20,
  fontFamily: 'CaviarDreams',
  color: 'white',
},
SignOut: {
  top: 350,
  backgroundColor: '#e67e22',
  justifyContent: 'center',
  width: 120,
  marginLeft: 30,
  borderRadius: 17,
},
sair: {
  fontFamily: 'CaviarDreams_Bold',
    
  padding:12,
}
});

Answer 1

onAuthStateChanged返回取消订阅功能。您只需要从效果中返回此函数，然后在卸载组件时react就会调用它。您似乎已经在考虑这些思路，但是还不太正确。试试这个：

useEffect(() => {
  const unsubscribe = auth().onAuthStateChanged(onAuthStateChanged);
  return unsubscribe;
}, []);

或者没有中间变量：

useEffect(() => {
  return auth.onAuthStateChanged(onAuthStateChanged);
}, []);

清除钩子上的异步调用-反应Native / Firebase我该怎么办？

1 个答案: