Javascript 反应本机/反应导航：App.js加载在无限循环中

我正在使用和构建react本机应用程序。下面是我在App.js（最高组件）中尝试做的事情：

检查用户是否已登录

如果用户已登录，请保存用户信息。如果不是，则标记为“非用户”

如果用户信息有效，请加载应用程序的屏幕堆栈。如果“非用户”，则加载屏幕堆栈以进行登录

下面是代码。但是，当我运行代码时，它被加载到一个无限循环中。我不明白为什么这个会触发一个无限循环…知道我哪里出错了吗

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

import React，{useState，useffect，useContext}来自“React”；
从“/routes/Home”导入主页；
从“/routes/Login”导入登录名；
从“/routes/OtherProfile”导入其他配置文件；
从“/routes/Post”导入邮件；
从“/routes/Comments”导入注释；
从“/routes/Wishlist”导入愿望列表；
从“/routes/Mypage”导入Mypage；
从“/context/Loginfo”导入Loginfo；
从“@react native firebase/firestore”导入firestore；
从“@react native firebase/auth”导入auth，{firebase}；
从“@react-navigation/native”导入{NavigationContainer}”；
从“@react navigation/stack”导入{createStackNavigator}；
从“反应本机安全区域上下文”导入{SafeAreaView}；
导入“反应本机手势处理程序”；
const-MainStack=createStackNavigator（）；
函数MainStackScreen（）{
const{loginfo，setLoginfo}=useContext（loginfo）；
if（loginfo.loading==true）{
返回null；
}否则{
返回(
{loginfo.data！==“非用户”(
) : (
)}
);
}
}
导出默认函数App（）{
const[loginfo，setLoginfo]=useState（{loading:true，data:null}）；
useffect（（）=>{
auth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
const k=user.uid；
if（loginfo.data==null）{
firestore（）
.收集（“用户”）
.doc（k）
.get（）
。然后（（doc）=>{
常量j={…doc.data（），uid:k}；
setLoginfo（{loading:false，data:j}）；
});
}
}否则{
setLoginfo（{加载：false，数据：“非用户”}）；
}
});
}，[loginfo]）；
console.log（“加载”）；//这是无限重复的……知道为什么会发生这种情况吗？
返回(
);
}

请从

useffect

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

---

函数格式已弃用，请按以下代码编辑代码，可能您的问题已解决：

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

const screens=createStackNavigator({
主页：{screen:Home}，
通知：{screen:Advice}，
搜索：{屏幕：搜索}，
类别列表：{screen:Categorylist}，
产品：{屏幕：产品}，
篮子：{屏幕：篮子}，
篮筐2:{屏幕：篮筐2}，
篮筐3:{屏幕：篮筐3}，
Orderdet:{屏幕：Orderdet}，
Moreadvice:{screen:Moreadvice}，
支付：{屏幕：支付}，
expand_scr:{屏幕：expand_scr}，
}, {
headerMode:“无”，
});
导出默认屏幕2=createDrawerNavigator({
主页：{screen:screens}，
配置文件：{屏幕：配置文件，
导航选项：{
抽屉标签：'profile'，
付款人：（）=>(
),
},
},
顺序：{屏幕：顺序，
导航选项：{
抽屉标签：“商店”，
付款人：（）=>(
),
},
},
Fav:{屏幕：Fav，
导航选项：{
抽屉标签：“标签3”，
付款人：（）=>(
),
},
},
Listadvice:{屏幕：Listadvice，
导航选项：{
抽屉标签：“标签4”，
付款人：（）=>(
),
},
},
关于：{屏幕：关于，
导航选项：{
抽屉标签：“标签5”，
付款人：（）=>(
),
},
},
联系人：{屏幕：联系人，
导航选项：{
抽屉标签：“标签6”，
付款人：（）=>(
),
},
},
}, {
initialRouteName:“主页”，
contentComponent：侧菜单，
headerMode:“无”，
抽屉位置：'对'，
DropeRopenRoute:“DropeRopen”，
抽屉关闭路线：“抽屉关闭”，
DroperTogglerOute:“DroperToggle”，
抽屉宽度：240
})

useeffect与dependency loginfo一起运行，并在其中更改loginfo的值，尝试删除dependency[loginfo]test delete

import“react native手势处理程序”