javascript - React Native/React Navigation：App.js 无限循环加载

Question

我正在使用react-native-firebase和react-navigation构建一个反应原生应用程序。这是我在最高组件 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>
   );
 }

标签： javascriptreactjsreact-nativereact-navigationreact-native-firebase

Answer 1

请删除依赖loginfo项useEffect

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