loop本机/反应导航: App.js被加载在无限循环中

Question

我正在用反应-本机-火基和反应导航构建一个react本地应用程序。下面是我试图在App.js中所做的工作，这是最高的组件：

1. 检查用户是否已登录
2. 如果用户已登录，则保存用户的信息。如果没有，标记为“非用户”。
3. 如果用户的信息是有效的，加载应用程序的屏幕堆栈。如果“非用户”，则加载用于登录的屏幕堆栈。

下面是密码。但是，当我运行代码时，它将被加载到一个无限循环中。我不明白为什么这个应该触发一个无限的loop...any的想法，我错了吗？

 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

请从loginfo中删除依赖项useEffect

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
})