react-native - 不变违规 : Maximum update depth exceeded using react Navigation v5

Question

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

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 时，我怀疑 hook 被多次调用。