React Native：添加条件后超出最大调用堆栈大小错误

Question

我收到错误“超出最大调用堆栈大小”。在我的代码中向导航文件添加条件后。我使用的堆栈是带有 Expo、Redux、GraphQL 的 React-Native，而我的导航库是 react-navigation。我正在开发 iOS 模拟器。这是打破 应用：

//navigations.js     
if (!this.props.user.isAuthenticated) {
          return <AuthenticationScreen />;
        }

这就是navigations.js的全部内容

import React, { Component } from "react";
import {
  addNavigationHelpers,
  StackNavigator,
  TabNavigator
} from "react-navigation";
import { connect } from "react-redux";
import { FontAwesome } from "@expo/vector-icons";

import HomeScreen from "./screens/HomeScreen";
import ExploreScreen from "./screens/ExploreScreen";
import FavoritesScreen from "./screens/FavoritesScreen";
import ProfileScreen from "./screens/ProfileScreen";
import AuthenticationScreen from "./screens/AuthenticationScreen";

import { colors } from "./utils/constants";

const TAB_ICON_SIZE = 20;

const Tabs = TabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        headerTitle: "Saga",
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome size={TAB_ICON_SIZE} color={tintColor} name="home" />
        )
      })
    },
    Explore: {
      screen: ExploreScreen,
      navigationOptions: () => ({
        headerTitle: "Explore",
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome size={TAB_ICON_SIZE} color={tintColor} name="search" />
        )
      })
    },
    Favorites: {
      screen: FavoritesScreen,
      navigationOptions: () => ({
        headerTitle: "Favorites",
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome
            size={TAB_ICON_SIZE}
            color={tintColor}
            name="file-video-o"
          />
        )
      })
    },
    Profile: {
      screen: ProfileScreen,
      navigationOptions: () => ({
        headerTitle: "Profile",
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome size={TAB_ICON_SIZE} color={tintColor} name="user" />
        )
      })
    }
  },
  {
    lazy: true,
    tabBarPosition: "bottom",
    swipeEnabled: false,
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      activeTintColor: colors.PRIMARY,
      inactiveTintColor: colors.LIGHT_GRAY,
      style: {
        backgroundColor: colors.BASE_GRAY,
        height: 50,
        paddingVertical: 5
      }
    }
  }
);

const AppMainNav = StackNavigator(
  {
    Home: {
      screen: Tabs
    }
  },
  {
    cardStyle: {
      backgroundColor: "#F1F6FA"
    },
    navigationOptions: () => ({
      headerStyle: {
        backgroundColor: colors.BASE_GRAY
      },
      headerTitleStyle: {
        fontWeight: "bold",
        fontSize: 24,
        color: colors.BLUE
      }
    })
  }
);

class AppNavigator extends Component {
  render() {
    const nav = addNavigationHelpers({
      dispatch: this.props.dispatch,
      state: this.props.nav
    });
    if (!this.props.user.isAuthenticated) {
      return <AuthenticationScreen />;
    }
    return <AppMainNav navigation={nav} />;
  }
}

export default connect(state => ({
  nav: state.nav,
  user: state.user
}))(AppNavigator);

export const router = AppMainNav.router;

这是 user.js 减速器：

const initialState = {
  token: null,
  isAuthenticated: false,
  info: null
};

export default (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

我看不出是什么导致了无限循环。

更新 #1

AuthenticationScreen.js（减去导入）

const Root = styled.View``;

const T = styled.Text``;

class AuthenticationScreen extends Component {
  state = {};
  render() {
    return (
      <Root>
        <T>AuthenticationScreen</T>
      </Root>
    );
  }
}

export default AuthenticationScreen;

Answer 1

据我了解，您已将问题与此代码隔离开来......

if (!this.props.user.isAuthenticated) {
  return <AuthenticationScreen />;
}
return <AppMainNav navigation={nav} />;

如果你删除...

if (!this.props.user.isAuthenticated) {
  return <AuthenticationScreen />;
}

它工作正常，这意味着 必须没问题。所以无限循环必须在你的 代码中。