ReactJS自定义Window事件中无法获取最新Props状态的技术求助

API 探路者

2026-8-7

React组件window点击事件无法获取最新props的解决方案

问题原因

你遇到的问题是因为useEffect绑定window点击事件时，回调函数捕获了当时的page值，后续page更新后，旧的回调函数并没有被替换，所以打印的还是初始绑定的旧值。

解决方法

方法1：将props加入useEffect依赖数组，重新绑定事件

每次page更新时，移除旧的事件监听，绑定新的回调（此时回调会捕获最新的page值）：

import { useEffect } from 'react';

function TestFun({ page }) {
  useEffect(() => {
    const handleWindowClick = () => {
      console.log('最新page值:', page);
    };

    window.addEventListener('click', handleWindowClick);
    // 清理旧事件，避免内存泄漏
    return () => window.removeEventListener('click', handleWindowClick);
  }, [page]); // 依赖数组添加page，触发重新执行

  return <div>当前页面：{page}</div>;
}

方法2：用useRef存储最新props，避免频繁绑定事件

如果不想每次page变化都解绑/绑定事件，可以用useRef实时同步最新的page值，事件回调直接取ref.current：

import { useEffect, useRef } from 'react';

function TestFun({ page }) {
  const latestPageRef = useRef(page);

  // 同步最新的page到ref
  useEffect(() => {
    latestPageRef.current = page;
  }, [page]);

  useEffect(() => {
    const handleWindowClick = () => {
      console.log('最新page值:', latestPageRef.current);
    };

    window.addEventListener('click', handleWindowClick);
    return () => window.removeEventListener('click', handleWindowClick);
  }, []); // 空依赖数组，只绑定一次事件

  return <div>当前页面：{page}</div>;
}