javascript - 为什么 React useEffect() 卸载不改变变量值？

Question

我正在创建一个 React 应用程序，现在我正在构建身份验证部分。一切正常，但是当用户登录时，我必须卸载我的日志记录组件并显示主页。
我正在使用 Ionic React 来制作组件并显示我正在使用的登录名 <IonModal />具有 swipeToClose Prop 的组件。
因此，当用户滑动关闭模式时，我正在收听 onWillDismiss设置状态变量的事件modalOpened至false .
一切都很好，但因为我正在卸载我的<Auth/>用户登录模态时的组件onWillDismiss被触发并尝试更新我的状态，因为我的组件已卸载，所以它不存在。
我尝试创建一个 bool 变量，当事件可以更新状态时设置为 true，当状态无法更新时设置为 false。我正在使用 useEffect钩子(Hook)来检测组件卸载。
奇怪的是，当我的变量设置为 false在我的useEffect它在我的 onWillDismiss 中设置回 true事件。
这是我的代码:

import React, { useState, useEffect } from "react";
import {
    IonPage,
    IonContent,
    IonModal,
    IonSlides,
    IonSlide,
    IonButton,
} from "@ionic/react";
import Login from "./Login";

// *Stylesheet
import "./style.scss";
import { AuthSuccess } from "../../types";

const Auth: React.FC<AuthSuccess> = ({ onSuccess: successHandler }) => {
    const [modalOpened, openModal] = useState(false);
    let updateModal: boolean = true;

    useEffect(() => {
        return () => {
            updateModal = false;
            console.log("use effect update modal is", updateModal);
        };
    }, []);

    return (
        <IonPage>
            <IonContent>
                <div className="slideContainer">
                    <IonSlides pager className="slide">
                        <IonSlide>Welcome</IonSlide>
                        <IonSlide>First Step</IonSlide>
                        <IonSlide>Second Step</IonSlide>
                        <IonSlide>Third Step</IonSlide>
                    </IonSlides>
                    <IonButton
                        mode="ios"
                        className="login"
                        onClick={() => openModal(modalOpened ? false : true)}
                    >
                        Login
                    </IonButton>
                </div>
            </IonContent>
            <IonModal
                isOpen={modalOpened}
                swipeToClose
                onWillDismiss={() => {
                    console.log("on dismiss", updateModal);
                    return updateModal ? openModal(false) : null;
                }}
                mode="ios"
            >
                <Login onSuccess={successHandler} />
            </IonModal>
        </IonPage>
    );
};

export default Auth;

这是我的控制台的屏幕截图

先感谢您

Answer 1

还没有机会尝试，但是looking at the docs如果您不使用 onDidDismiss而不是 onWillDismiss ?