不变冲突:使用react Navigation v5超过了最大更新深度

Question

我有一个登录屏幕，我已经把它放在堆栈中了。用户成功登录后，他被重定向到主屏幕，这是一个抽屉屏幕。抽屉屏幕的一个选项是注销，所以点击它用户就应该注销。以下是我的注销屏幕代码。我只是在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 />;
};

Answer 1

Invariant Violation: Maximum update depth exceeded using react Navigation v5发生在事物进入无限循环时

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

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

Answer 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()

干杯