React Native/React Navigation：App.js 無限循環加載

Question

我正在構建一個帶有react-native-firebase和react-navigation的 react native 應用程序。 這是我在 App.js（最高組件）中嘗試執行的操作：

1. 檢查用戶是否登錄
2. 如果用戶已登錄，請保存用戶信息。 如果不是，則標記為“非用戶”。
3. 如果用戶的信息有效，則加載應用程序的屏幕堆棧。 如果是“非用戶”，則加載用於登錄的屏幕堆棧。

下面是代碼。 但是，當我運行代碼時，它被無限循環加載。 我不明白為什么這個應該觸發一個無限循環......關於我哪里出錯的任何想法？

 import React, { useState, useEffect, useContext } from "react";
 import Home from "./routes/Home";
 import Login from "./routes/Login";
 import OtherProfile from "./routes/OtherProfile";
 import Post from "./routes/Post";
 import Comments from "./routes/Comments";
 import Wishlist from "./routes/Wishlist";
 import Mypage from "./routes/Mypage";
 import Loginfo from "./context/Loginfo";
 import firestore from "@react-native-firebase/firestore";
 import auth, { firebase } from "@react-native-firebase/auth";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { SafeAreaView } from "react-native-safe-area-context";
 import "react-native-gesture-handler";

 const MainStack = createStackNavigator();

 function MainStackScreen() {
   const { loginfo, setLoginfo } = useContext(Loginfo);
   if (loginfo.loading === true) {
     return null;
   } else {
     return (
       <MainStack.Navigator>
         {loginfo.data !== "nonuser" ? (
           <>
             <MainStack.Screen
               name="Home"
               component={Home}
               options={{ headerShown: false }}
             />
             <MainStack.Screen
               name="Post"
               component={Post}
             />
             <MainStack.Screen
               name="OtherProfile"
               component={OtherProfile}
             />
             <MainStack.Screen
               name="Comments"
               component={Comments}
             />
             <MainStack.Screen
               name="Wishlist"
               component={Wishlist}
             />
             <MainStack.Screen
               name="Mypage"
               component={Mypage}
             />
           </>
         ) : (
           <>
             <MainStack.Screen
               name="Login"
               component={Login}
               options={{ title: null }}
             />
           </>
         )}
       </MainStack.Navigator>
     );
   }
 }

 export default function App() {
   const [loginfo, setLoginfo] = useState({ loading: true, data: null });

   useEffect(() => {
     auth().onAuthStateChanged((user) => {
       if (user) {
         const k = user.uid;
         if (loginfo.data === null) {
           firestore()
             .collection("users")
             .doc(k)
             .get()
             .then((doc) => {
               const j = { ...doc.data(), uid: k };
               setLoginfo({ loading: false, data: j });
             });
         }
       } else {
         setLoginfo({ loading: false, data: "nonuser" });
       }
     });
   }, [loginfo]);

   console.log("loading"); //This one is infinitely repeated...any idea why this is happening?
   return (
     <NavigationContainer>
       <SafeAreaView style={{ flex: 1 }}>
         <Loginfo.Provider value={{ loginfo, setLoginfo }}>
           <MainStackScreen />
         </Loginfo.Provider>
       </SafeAreaView>
     </NavigationContainer>
   );
 }

Answer 1

請從useEffect刪除依賴loginfo

useEffect(() => {
     auth().onAuthStateChanged((user) => {
       ....
     });
   }, []); // remove it from here and use empty `[]`

Answer 2

不推薦使用函數格式，像這樣編輯您的代碼，也許您的問題已解決：

const screens = createStackNavigator({
  HomePage: { screen: Home },
  Advice: { screen: Advice },
  Search: { screen: Search },
  Categorylist: { screen: Categorylist },
  Product: { screen: Product },
  Basket: { screen: Basket },
  Basket2: { screen: Basket2 },
  Basket3: { screen: Basket3 },
  Orderdet: { screen: Orderdet },
  Moreadvice:{ screen: Moreadvice },
  Pay: { screen: Pay },
  expand_scr: { screen: expand_scr },
}, {
   headerMode: 'none',
});

export default  screens2 = createDrawerNavigator({
  HomePage: { screen: screens },
  Profile: {screen: Profile,
    navigationOptions: {

      drawerLabel:'profile',
      drawerIcon: () => (
        <Image
          source={image.user}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  Order: {screen: Order,
    navigationOptions: {
      drawerLabel:'shop',
      drawerIcon: () => (
        <Image
          source={image.choices}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  Fav: {screen: Fav,
    navigationOptions: {
      drawerLabel:'lable3',
      drawerIcon: () => (
        <Image
          source={image.wishlist}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  Listadvice: {screen: Listadvice,
    navigationOptions: {
      drawerLabel:'lable4',
      drawerIcon: () => (
        <Image
          source={image.list}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  About: {screen: About,
    navigationOptions: {
      drawerLabel:'lable5',
      drawerIcon: () => (
        <Image
          source={image.about}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  Contact: {screen: Contact,
    navigationOptions: {
      drawerLabel:'lable6',
      drawerIcon: () => (
        <Image
          source={image.contact}
          style={{width: 30, height: 30,}}
        />
      ),
    },
  },
  
}, {
  initialRouteName: 'HomePage',
  contentComponent: SideMenu,
  headerMode: 'none',
    drawerPosition: 'right',
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
    drawerWidth: 240
})