Question

我正在创建一个React应用，现在正在构建身份验证部分。一切正常，但是当用户登录时，我必须卸载我的日志记录组件并显示主页。

我正在使用Ionic React来制作组件并显示登录名，我正在使用<IonModal />组件，该组件具有swipeToClose属性。

因此，当用户滑动以关闭模式时，我正在监听onWillDismiss事件，以将状态变量modalOpened设置为false。

一切正常，但由于在用户登录模式<Auth/>时我正在卸载onWillDismiss组件，因此触发了它，并尝试更新我的状态，因为该组件不存在已卸载。

我试图创建一个布尔变量，当事件可以更新状态时将其设置为true，而当状态无法更新时将其设置为false。我正在使用useEffect挂钩来检测组件的卸载。奇怪的是，当我在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？

Answer 2

好吧，感谢VS Code eslint扩展，我找到了解决方案。

在每次渲染之后，从React Hook useEffect内部对'updateModal'变量的分配将丢失。要随时间保留该值，请将其存储在useRef Hook中，并将可变值保留在'.current'属性中。否则，您可以直接在useEffect.eslint（react-hooks / exhaustive-deps）内部移动此变量

我用过useRef钩子，现在一切正常！

为什么React useEffect（）卸载不会更改变量值？

2 个答案: