为什么onAuthStateChanged侦听器在删除后仍在侦听

Question

我有两个屏幕..首先是闪屏，在这里我借助firebase.auth()检查用户是否已经存在。onAuthStateChanged侦听器。如果用户为空，它将转到另一个firebase.auth()的登录屏幕。onAuthStateChanged侦听器用于在电话验证后获取用户，如果用户之前未注册，则将用户移至UserDetails屏幕以获取更多用户信息，或者移至主屏幕..同样的检查也在闪屏上进行，以确保只有在用户输入了他的详细信息后才在主屏幕上显示..问题是，在登录屏幕上，电话验证完成后，firebase.auth()检测到用户登录，启动屏幕的监听器也会被执行，有时会导致致命的崩溃..

那么，我应该如何正确删除登录屏幕上的监听器？我的方式不能正常工作。

时间延迟用于动画显示在初始屏幕上

以下是启动屏幕上的代码：

try{
  if(!firebase.apps.length){

    firebase.initializeApp(firebaseConfig);

  }
}catch(err){
  console.log(err);
}

const cacheResourcesAsync = async () => {

    //Images to be loaded

    ];
  
    const cacheImages = images.map(image => {
      return Asset.fromModule(image).downloadAsync();
    }); 

    return Promise.all(cacheImages);
}


export const SplashLoadingScreen = () => {

    const [isReady, setIsReady] = useState(false);
    const [isFire, setIsFire] = useState(false);
    const [isFont, setIsFont] = useState(false);
    const [isImages, setIsImages] = useState(false);

    const navigation = useNavigation();

    var unsubscribe;

    //Loading Fonts

    const [michromaLoaded] = useMichroma({ Michroma_400Regular });

    const [latoLoaded] = useLato({ Lato_700Bold });

    //Checking if the fonts are ready
    useEffect(() => {
      if(michromaLoaded && latoLoaded){
        setIsFont(true);
      }
    }, [michromaLoaded, latoLoaded]);

    //Checking if the Images are loaded or not
    useEffect(() => {

      cacheResourcesAsync();
      setIsImages(true);    

      return () => unsubscribe = undefined;
      
    }, []);


    //Checking if Firebase is fired up
    useEffect(() => {
      if(firebase.apps.length !== 0){

        setIsFire(true);

      }

    }, [firebase.apps.length]);

    //Last Check before moving to other screen
    useEffect(() => {

      if(isFont && isImages && isFire){
        
        setTimeout(() => {
          setIsReady(true); // Animation Purpose
        }, 5000);

      }
  
    }, [isFont, isImages, isFire]);   

    //Moving to other screens
    useEffect(() => {
      if(isReady){

        unsubscribe = firebase.auth().onAuthStateChanged((user) => {          
          
          if (user) {

            firebase.firestore().collection("User Details").doc(firebase.auth().currentUser.uid).get().then((snap) => {

              if(snap.exists){
    
                navigation.navigate('Tab');
                console.log("Splash"); //Used to check if the listener is still working on login screen
                
              }else {
                navigation.navigate('User');
                console.log("Splash");
              }
    
            });
              
              return;
            
          }
  
          navigation.navigate("SignUp");
  
       });

      }

    }, [isReady]);


    SplashScreen.hideAsync();

Answer 1

如何正确删除登录屏幕上的侦听器

＜code＞onAuthStateChanged（）

既然你知道

unsubscribe = firebase.auth().onAuthStateChanged((user) => {...});

您只需调用< code>unsubscribe()来“删除侦听器”。见括号，因为它是一个函数。

所以，如果我正确理解了你的情况，你应该在navigation.navigate（...）调用之前调用它。