我在使用 useEffect 和 React Redux 时遇到问题。 我在 useEffect 中收到错误说“没有从渲染中返回”

Question

I cannot tell why I am getting the error below. I suspect it has to do with the provider but I do not know how to fix this. The reason I suspect it has to do with the provider is simply because when I comment out lines 71-73 and uncomment lines 67-69 it renders and the error goes away.

Error: Main(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. Error:

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

My code:

     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

This might help

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