React Native 导航错误：警告：无法对卸载的组件执行 React 状态更新

Question

我正在处理 React Native 项目，登录后，当它从登录屏幕跳转到主屏幕时，我收到此错误警告，我尝试了所有解决方案，例如在 useEffect 中卸载组件，但仍然出现相同的错误.这是我的 App js 组件，我在其中定义了所有路由。 所以请给我一个好的解决方案，我在其他一些屏幕上也遇到同样的问题，尤其是当我导航到上一个屏幕时

   const AuthStack = createStackNavigator();
      export const AuthStackScreen = () => (
         <AuthStack.Navigator>
           <AuthStack.Screen name="Signin" component={Signin} />
           <AuthStack.Screen name="Signup" component={Signup} />
         </AuthStack.Navigator>
       );
    const HomeStack = createStackNavigator();
      export const HomeStackScreen = () => (
   <HomeStack.Navigator
      screenOptions={({ route, navigation }) => ({
      headerShown: false,
      gestureEnabled: true,
      cardOverlayEnabled: true,
      headerStatusBarHeight:
      navigation
        .dangerouslyGetState()
        .routes.findIndex((r) => r.key === route.key) > 0
        ? 0
        : undefined,
        // ...TransitionPresets.ModalSlideFromBottomIOS,
     })}
     mode="modal">

      <HomeStack.Screen name="Home" component={Home} unmountOnBlur={true}
           options={{ ...TransitionPresets.ModalTransition, unmountOnBlur: true }} />
      <HomeStack.Screen name="Hotels" component={Hotels} unmountOnBlur={true}
           options={{ ...TransitionPresets.ModalTransition, unmountOnBlur: true }} />
      <HomeStack.Screen name="Rooms" component={Rooms} options={{ 
           ...TransitionPresets.ModalTransition }} />
      <HomeStack.Screen name="ReserveRoom" component={ReserveRoom} options={{ 
           ...TransitionPresets.ModalTransition }} />
      <HomeStack.Screen name="News" component={News} options={{ 
            ...TransitionPresets.ModalTransition }} />
      <HomeStack.Screen name="Deals" component={Deals} options={{ 
            ...TransitionPresets.ModalTransition }} />
      <HomeStack.Screen name="Destinations" component={Destinations} options={{ 
            ...TransitionPresets.ModalTransition }} />
      <HomeStack.Screen name="Signin" component={Signin} options={{ 
            ...TransitionPresets.ModalTransition }} />
      <HomeStack.Screen name="Signup" component={Signup} options={{ 
            ...TransitionPresets.ModalTransition }} />
      </HomeStack.Navigator>
       );
            const ProfileStack = createStackNavigator();
            export const ProfileStackScreen = () => (
              <ProfileStack.Navigator>
                <ProfileStack.Screen name="Profile" component={Profile} />
              </ProfileStack.Navigator>
            );


            const Drawer = createDrawerNavigator();
            const DrawerScreen = () => (
              <Drawer.Navigator initialRouteName="Home" drawerContent={props => <CustomDrawerContent 
              {...props} />}>
                <Drawer.Screen name="Home" unmountOnBlur={true}
                  options={{ unmountOnBlur: true }} component={TabsScreen} />
                <Drawer.Screen name="Profile" component={ProfileStackScreen} />
              </Drawer.Navigator>
            );

          const RootStack = createStackNavigator();
          const RootStackScreen = () => (
            <RootStack.Navigator headerMode="none">
              <RootStack.Screen name="App" component={DrawerScreen} options={{ animationEnabled: false }} />
            </RootStack.Navigator>
          );
          const AuthDStack = createStackNavigator();
          const AuthDStackScreen = () => (
            <AuthDStack.Navigator headerMode="none">
              <AuthDStack.Screen name="Home" component={TabsScreen} />
            </AuthDStack.Navigator>
          );

          export default function App() {
            // It convert Auth Headers in correct format
            if (!global.btoa) {
              global.btoa = encode;
            }
            if (!global.atob) {
              global.atob = decode;
            }
          LogBox.ignoreAllLogs(true)
            const dispatch = useDispatch();
            const { user, isLoading, error, csrfToken, userDetail } = useSelector((state) => {
              return {
                userDetail: state.Auth.userDetail,
                user: state.Auth.user,
                isLoading: state.Auth.isLoading,
                csrfToken: state.Auth.csrfToken
              }
            })

            useEffect(() => {
              dispatch(getUserAuth());
            }, []);
          console.log(userDetail, "143 App js")
            return (
              <>
                {isLoading === true ? (
                  <View style={{
                    position: 'absolute',
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0,
                    opacity: 0.6,
                    backgroundColor: 'white',
                    justifyContent: 'center',
                    alignItems: 'center',
                    zIndex: 1000
                  }}>
                    <ActivityIndicator size="large" color="black" />
                  </View>
                ) : null

                }
                <NavigationContainer>
                  {user !== null ? (
                    <RootStackScreen />
                  ) : (
                      <AuthDStackScreen />
                    )}


                </NavigationContainer>
              </>
            )
          }