React自定义Modal的EventListener无法移除？useEffect使用问题排查

你的问题出在useEffect的执行逻辑上：当前不管modal是'flex'还是'none'，每次状态变化都会触发useEffect——这意味着当modal变为'none'时，虽然执行了清理函数移除监听，但紧接着又会重新执行useEffect添加新的监听，导致监听一直存在。

下面是修正后的代码，同时优化了逻辑：

import { useEffect, useState, useCallback } from "react";

export const useModal = (ref) => {
    const [modal, setModal] = useState('none');

    // 用useCallback包裹点击函数，并用函数式更新避免依赖modal
    const onClick = useCallback(() => {
        setModal(prevState => prevState === 'none' ? 'flex' : 'none');
    }, []);

    useEffect(() => {
        // 仅在modal显示时（状态为flex）添加监听
        if (modal !== 'flex') return;

        const checkIfClickedOutside = (e) => {
            // 此时modal肯定是flex，无需再判断
            if (ref.current && !ref.current.contains(e.target)) {
                onClick();
            }
        };

        document.addEventListener('click', checkIfClickedOutside);
        return () => {
            document.removeEventListener('click', checkIfClickedOutside);
        };
    }, [modal, onClick]); // 依赖modal和处理后的onClick

    return {
        onClick,
        modal
    };
};

关键修改说明： #

• 控制监听的添加时机：只有当modal状态为'flex'时才添加外部点击监听，'none'状态下直接跳过添加逻辑，从根源避免不必要的监听存在。
• 优化onClick函数：用useCallback包裹并使用函数式更新setModal，既保证函数引用稳定，又不需要依赖modal状态，减少不必要的重渲染。
• 清理逻辑可靠：当modal从'flex'切换为'none'时，useEffect的清理函数会自动移除之前添加的监听，且不会再新增监听。

内容的提问来源于stack exchange，提问作者Ignacio Wolf