React组件事件监听函数无法获取最新状态的解决方法

我尝试在组件打开和关闭时添加、移除window事件监听，但遇到问题：监听函数中的isOpen始终处于初始状态，无法获取最新值。我见过很多使用useEffect(() => { .. }, []);的解决方案，但这不符合我的需求——我希望在组件开关时机而非挂载、卸载时处理监听。我也尝试过使用useCallback，但遇到了和useEffect相同的问题。

当前代码：

import { forwardRef, Ref, useEffect, useImperativeHandle, useRef } from 'react';
import { useState } from 'react';

export const Example = (props) => {

    const userMenuRef = useRef(null);

    return (
        <>
            <button onClick={() => userMenuRef.current?.open()}>Open Popover</button>
            <Popover ref={userMenuRef} />
        </>
    );
}

type Props = {
};

export const Popover = forwardRef((props: Props, ref: Ref<any>) => {

    const [isOpen, setIsOpen] = useState(false);
    const [clickOutsideHandler] = useState(() =>
        (evt: MouseEvent): void => {
            console.log('!isOpen: ' + isOpen); // <-- issue is that `isOpen` is always false
            if (!isOpen || popoverRef.current.contains(evt.target as Node)) { return; }   // Clicked on one of the own children
            
            close();
        }
    );

    const popoverRef = useRef(null);

    const open = (): void => {
        if (isOpen) { return; }
        setIsOpen(true);
    }

    const close = (): void => {
        if (!isOpen) { return; }
        setIsOpen(false);
    }

    useImperativeHandle(ref, () => ({
        open,
    }));

    useEffect(() => {
        if (isOpen) {
            window.requestAnimationFrame(() => {    // Wait 1 tick; otherwise a potential click that opend the element will immediately trigger a click-outside event
                document.addEventListener('click', clickOutsideHandler);
            });
        }
        else {
            document.removeEventListener('click', clickOutsideHandler);
        }
    }, [isOpen]);

    return (
        <>
            {(isOpen) &&
                <div ref={popoverRef}>
                    <div onClick={() => { close(); }}>Some Content here</div>
                </div>
            }
        </>
    );
});

核心问题是你用useState存储了clickOutsideHandler，它捕获的是初始渲染时的isOpen闭包值，后续状态更新不会同步这个函数里的isOpen。以下是两种可行的解决方式：

方法一：用useRef同步最新状态 #

通过ref保存isOpen的最新值，让监听函数能随时访问到当前状态：

1. 创建isOpenRef，在useEffect里同步isOpen的状态到ref中
2. 修改监听函数，从isOpenRef.current获取最新的状态值

方法二：随状态更新重新生成监听函数 #

不再用useState存储监听函数，而是让函数随isOpen变化重新创建（可以结合useCallback），确保每次都捕获最新的isOpen值。注意要在useEffect的依赖中加入该函数，同时添加清理逻辑避免内存泄漏。

import { forwardRef, Ref, useEffect, useImperativeHandle, useRef, useState } from 'react';

export const Example = (props) => {
    const userMenuRef = useRef(null);

    return (
        <>
            <button onClick={() => userMenuRef.current?.open()}>Open Popover</button>
            <Popover ref={userMenuRef} />
        </>
    );
}

type Props = {};

export const Popover = forwardRef((props: Props, ref: Ref<any>) => {
    const [isOpen, setIsOpen] = useState(false);
    const isOpenRef = useRef(isOpen);
    const popoverRef = useRef(null);

    // 同步isOpen状态到ref，确保随时能拿到最新值
    useEffect(() => {
        isOpenRef.current = isOpen;
    }, [isOpen]);

    const clickOutsideHandler = (evt: MouseEvent): void => {
        console.log('!isOpen: ' + isOpenRef.current);
        // 从ref中获取最新的isOpen状态
        if (!isOpenRef.current || popoverRef.current?.contains(evt.target as Node)) {
            return;
        }
        close();
    };

    const open = (): void => {
        if (isOpen) { return; }
        setIsOpen(true);
    }

    const close = (): void => {
        if (!isOpen) { return; }
        setIsOpen(false);
    }

    useImperativeHandle(ref, () => ({
        open,
    }));

    useEffect(() => {
        if (isOpen) {
            window.requestAnimationFrame(() => {
                document.addEventListener('click', clickOutsideHandler);
            });
        } else {
            document.removeEventListener('click', clickOutsideHandler);
        }
        // 组件卸载时清理监听，避免内存泄漏
        return () => {
            document.removeEventListener('click', clickOutsideHandler);
        };
    }, [isOpen, clickOutsideHandler]);

    return (
        <>
            {isOpen && (
                <div ref={popoverRef}>
                    <div onClick={close}>Some Content here</div>
                </div>
            )}
        </>
    );
});

内容的提问来源于stack exchange，提问作者Arno van Oordt