反应通行处理屏幕状态

Question

我有一个如下所示的导航组件。我想根据一些状态变量（isLoading、isAuthenticated、isOnboarded）设置导航屏幕。然而，当前的设置给了我一个错误：

错误：重新渲染次数过多。 React 将渲染次数限制为 防止无限循环。

我知道这种情况正在发生，因为一旦调用此函数导致重新渲染，我就会立即设置状态，但我不确定如何更改它以实现我想要的。

then替换该行

const [screens, setScreens] = useState();

我考虑用

let screen;

，而不是在任何地方使用 setScreen() ，我将 screen =

但是这也不起作用，因为有时状态（isLoading、isAuthenticated、isOnboarded）不满足任何条件（例如，当在过渡到注销的过程中）在这种情况下，我希望屏幕保持其先前的状态，但它被设置为未定义，这会引发错误。

const Navigation = () => {
  const { isLoading, isAuthenticated, isOnboarded } = useGlobalContext();

  const [screens, setScreens] = useState();

  // Splash screen while app loading
  if (isLoading)
    setScreens(
      <>
        <Stack.Screen
          name="Splash"
          component={SplashScreen}
        />
      </>
    );
  // Authentication screens while user not authenticated
  else if (!isLoading && !isAuthenticated && isOnboarded == -1)
    setScreens(
      <>
        <Stack.Screen
          name="Register"
          component={RegisterScreen}
        />
        <Stack.Screen
          name="Login"
          component={LoginScreen}
          options={{ animationEnabled: false }}
        />
      </>
    );
  // Onboarding screens while user authenticated but not onboarded
  else if (!isLoading && isAuthenticated && !isOnboarded)
    setScreens(
      <>
        <Stack.Screen
          name="OnboardingBirthday"
          component={OnboardingBirthdayScreen}
        />
        <Stack.Screen
          name="OnboardingGender"
          component={OnboardingGenderScreen}
        />
      </>
    );
  // All other screens while user authenticated and onboarded
  else if (!isLoading && isAuthenticated && isOnboarded === true)
    setScreens(
      <>
        <Stack.Screen name="Home" component={TabNavigator} />
        <Stack.Screen name="Product" component={ProductScreen} />
      </>
    );

  return (
    <NavigationContainer theme={Theme}>
      <Stack.Navigator headerMode="none">{screens}</Stack.Navigator>
    </NavigationContainer>
  );
};

Answer 1

您尝试过这种方法吗？

const Navigation = () => {
  const { isLoading, isAuthenticated, isOnboarded } = useGlobalContext();

  const renderSplash = () => (
    <Stack.Screen name="Splash" component={SplashScreen} />
  );

  const renderAuth = () => (
    <>
      <Stack.Screen name="Register" component={RegisterScreen} />
      <Stack.Screen
        name="Login"
        component={LoginScreen}
        options={{ animationEnabled: false }}
      />
    </>
  );

  const renderOnboarding = () => (
    <>
      <Stack.Screen
        name="OnboardingBirthday"
        component={OnboardingBirthdayScreen}
      />
      <Stack.Screen
        name="OnboardingGender"
        component={OnboardingGenderScreen}
      />
    </>
  );

  const renderHome = () => (
    <>
      <Stack.Screen name="Home" component={TabNavigator} />
      <Stack.Screen name="Product" component={ProductScreen} />
    </>
  );

  const renderScreens = () => {
    switch (true) {
      case isLoading:
        return renderSplash();
      case !isLoading && !isAuthenticated && isOnboarded == -1:
        return renderAuth();
      case !isLoading && isAuthenticated && !isOnboarded:
        return renderOnboarding();
      case !isLoading && isAuthenticated && isOnboarded:
        return renderHome();
      default:
        throw new Error("No screen to render");
    }
  };

  const _appScreens = renderScreens();

  return (
    <NavigationContainer theme={Theme}>
      <Stack.Navigator headerMode="none">{_appScreens}</Stack.Navigator>
    </NavigationContainer>
  );
};

另外，您可以尝试在单独的文件中为每个文件中的每个功能都使用React组件，而不是将所有函数使用。