我在useEffect和React Redux上遇到了问题。我在使用效果中收到错误说"nothing was returned from render"

Question

我不知道为什么我得到下面的错误。我怀疑这与供应商有关，但我不知道如何解决这个问题。我怀疑它与提供程序有关的原因很简单，因为当我注释掉第71-73行并取消注释67-69行时，它呈现并且错误消失了。

错误:Main(…):渲染没有返回任何内容。这通常意味着缺少返回语句。或者，如果不呈现任何内容，则返回null。错误:

40 | useEffect(() => {    
41 |   setLoaded(true);
42 |   firebase.auth().onAuthStateChanged(user => {
> 43 |     user ? setLoggedIn(true) : setLoggedIn(false);
| ^  44 |   });
45 |   // return() => null;
46 | }, []);

我代码:

1  import { StatusBar } from 'expo-status-bar';
2  import React, { useState, useEffect } from 'react';
3  import { NavigationContainer } from "@react-navigation/native";
4  import { createStackNavigator } from "@react-navigation/stack";
5  import { View, Text } from "react-native"
6  import { Provider } from "react-redux"
7  import { createStore, applyMiddleware } from "redux"
8  import LandingScreen from "./components/auth/Landing"
9  import RegisterScreen from "./components/auth/Register"
10  import MainScreen from "./components/Main"
11  import firebase from "firebase"
12  import config from "./config"
13  import rootReducer from "./redux/reducers"
14  import thunk from "redux-thunk"
15  
16  const store = createStore(rootReducer, applyMiddleware(thunk))
17  
18  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
19  const firebaseConfig = {
20    apiKey: config.API_KEY,
21    authDomain: config.AUTH_DOMAIN,
22    projectId: config.PROJECT_ID,
23    storageBucket: config.STORAGE_BUCKET,
24    messagingSenderId: config.MESSAGING_SENDER_ID,
25    appId: config.APP_ID, 
26    measurementId: config.MEASUREMENT_ID
27  };
28  
29  if(firebase.apps.length === 0) {
30    firebase.initializeApp(firebaseConfig);
31  }
32  
33  const Stack = createStackNavigator();
34  
35  export function App() {
36  
37    const [ loaded, setLoaded ] = useState(false);
38    const [ loggedIn, setLoggedIn ] = useState(false);
39  
40    useEffect(() => {    
41      setLoaded(true);
42      firebase.auth().onAuthStateChanged(user => {
43        user ? setLoggedIn(true) : setLoggedIn(false);
44      });
45      // return() => null;
46    }, []);
47  
48    if(!loaded) {
49      return(
50        <View style={{ flex: 1, justifyContent: "center" }}>
51          <Text>Loading</Text>
52        </View>
53      );
54    } 
55  
56    if(!loggedIn) {
57      return (
58        <NavigationContainer>
59          <Stack.Navigator initialRouteName="Landing">
60            <Stack.Screen name="Landing" component={LandingScreen} options={{ headerShown: false }}/>
61            <Stack.Screen name="Register" component={RegisterScreen} options={{ headerShown: false }}/>
62          </Stack.Navigator>
63        </NavigationContainer>
64      );
65    } else {
66      return (
67        // <View style={{ flex: 1, justifyContent: "center" }}>
68        //   <Text>jawn</Text>
69        // </View>
70        
71        <Provider store={store}>
72          <MainScreen />
73        </Provider>
74      );
75    };
76  
77  }
78  
79  export default App

Answer 1

这可能有帮助

if (!loaded) {
return (...);
}
return !loggedIn ? (
<NavigationContainer>
<Stack.Navigator initialRouteName="Landing">
<Stack.Screen
name="Landing"
component={LandingScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Register"
component={RegisterScreen}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
) : (
<Provider store={store}>
<MainScreen />
</Provider>
);