不变违规：使用反应导航 v5 超过了最大更新深度答案

【问题标题】：Invariant Violation: Maximum update depth exceeded using react Navigation v5不变违规：使用反应导航 v5 超过了最大更新深度
【发布时间】：2020-06-14 08:39:04
【问题描述】：

我有一个已放入堆栈的登录屏幕。用户成功登录后，他被重定向到主屏幕，这是一个抽屉屏幕。抽屉屏幕的选项之一是注销，因此单击它的用户应该注销。以下是我的注销屏幕代码。我只是在 ui 的注销屏幕中显示进度条，但在 useEffect 挂钩中，我正在调用以下代码

navigation.reset({
   routes: [{name: LOGIN_SCREEN}],
});

我也尝试在useLayoutEffect 中调用上述方法，但注销按钮只是挂起。

我的导航堆栈如下所示

<Stack.Navigator>
    <Stack.Screen
      name={LOGIN_SCREEN}
      component={LoginScreen}
      options={{headerShown: false}}
    />
    <Stack.Screen
      name={HOME_STACK_SCREEN}
      component={DrawerStack}
      options={{headerShown: false}}
    />

    // ...

</Stack.Navigator>

我的抽屉组件如下

<Drawer.Navigator
  drawerStyle={{backgroundColor: BLUE_COLOR_1}}
  drawerContentOptions={{labelStyle: {color: '#FFF'}}}
>
    <Drawer.Screen
      name={HOME_SCREEN}
      component={Home}
      options={{
        // ...
      }}
    />
    <Drawer.Screen
      name={LOGOUT_SCREEN}
      component={Logout}
      options={{
       // ...
      }}
    />

    // ...

</Drawer.Navigator>

以下是我的注销组件

const Logout = ({navigation}) => {
    async function logout() {
        try {
            await AsyncStorage.clear();
            navigation.reset({
                index: 0,
                routes: [{name: LOGIN_SCREEN}],
            });
        } catch (e) {
            Alert.alert(e.toString());
            console.log(e.toString());
        }
    }

    useEffect(() => {
         logout();
    }, []);

    return <ProgressBar />;
};

【问题讨论】：

你能分享Logout组件吗？
为什么要注销组件？只需使用抽屉内容来呈现一个带有注销的自定义内容并进行重置。
@AshwinMothilal 但如何使用 React Navigationv5。所有在线解决方案都展示了如何使用 v4 或更高版本进行操作。我在 v5 中找不到与文档相关的任何内容
@koox00 我已经在 wuestion 中添加了代码。请检查

标签： react-native react-hooks react-navigation-v5

【解决方案1】：

Invariant Violation: Maximum update depth exceeded using react Navigation v5 在无限循环中发生

navigation.reset({
    routes: [{name: LOGIN_SCREEN}],
});

当你说你把上面的代码放在useEffect 中时，我怀疑钩子被多次调用。

【讨论】：

但我在我的 useEffect 中放置了空数组，它只调用一次 useEffect(()=>{navigation.reset({ routes: [{name: LOGIN_SCREEN}], });},[ ])
你把这个效果放在Login_screen本身了吗？
我已将其放入注销屏幕。为什么我要把它放在登录中？ @maulikdhmeliya

【解决方案2】：

我看到了你的代码，老实说，如果我们想到身份验证流程，这对我来说并不好看，这就是我这么说的原因。请逐步检查此链接，您将了解如何以适当的方式简单地实现此身份验证流程。 React Navigation Auth Flow，当我们尝试从android后退按钮导航屏幕时出现这个问题，user can go back to login after you navigate user to home page on success login

其次，您可以在当前代码中尝试一种条件。

您需要在屏幕中调用注销功能之前检查一个条件

useEffect(()=>{
 if(check if user value if still there in async storage ) {
 **Here you can excute you code for log out **
 }
}

而不是使用导航中的重置操作使用 popToTop ，在这里您可以找到参考您如何使用PopToTop 或使用此

navigation.popToTop()

干杯！！

【讨论】：