为什么在window事件处理器中无法访问React状态？

问题原因 #

你的useEffect依赖数组是空的，组件挂载时handleScroll函数被创建，它通过闭包捕获了初始的open状态（值为false）。后续即使open状态更新，绑定在scroll事件上的依然是这个旧的handleScroll函数，所以控制台永远输出false。

解决方案 #

方案1：将状态加入useEffect依赖数组

把open添加到useEffect的依赖数组中，这样每次open变化时，都会移除旧的事件监听，重新绑定捕获了最新状态的handleScroll函数：

const [open, setOpen] = useState(false);

const handleScroll = () => {
    const { scrollHeight, clientHeight } = document.documentElement;
    console.log(open);
};

useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
        window.removeEventListener('scroll', handleScroll)
    };
}, [open]); // 加入open作为依赖

方案2：使用useRef保存最新状态

通过useRef保存open的最新值，ref的current属性会实时同步状态变化，避免闭包陷阱：

const [open, setOpen] = useState(false);
const openRef = useRef(open);

// 同步ref与state
useEffect(() => {
    openRef.current = open;
}, [open]);

const handleScroll = () => {
    const { scrollHeight, clientHeight } = document.documentElement;
    console.log(openRef.current); // 访问最新状态
};

useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
        window.removeEventListener('scroll', handleScroll)
    };
}, []);

方案3：将事件处理函数写在useEffect内部

把handleScroll直接定义在useEffect内部，这样每次依赖变化时都会重新创建函数，自然捕获最新的状态：

const [open, setOpen] = useState(false);

useEffect(() => {
    const handleScroll = () => {
        const { scrollHeight, clientHeight } = document.documentElement;
        console.log(open);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
        window.removeEventListener('scroll', handleScroll)
    };
}, [open]);

补充说明 #

你之前尝试把open传入handleScroll无效，是因为旧的handleScroll函数依然被绑定在事件上，它接收的参数还是初始的open值。核心问题是要让事件处理函数能捕获到最新的状态，以上三种方案都能解决这个闭包问题。

内容的提问来源于stack exchange，提问作者Sphenix Dev