useEffect内事件监听器中变量值始终保持初始值问题

架构老林

2026-8-27

核心错误点

你对React Hooks闭包捕获规则的理解存在偏差，这个问题和Redux本身没有关系，是JavaScript语言本身的闭包特性结合Hooks执行机制导致的经典「陈旧闭包」问题：

依赖数组为空的useEffect仅在组件首次挂载时执行一次，此时你绑定到mapbox moveend事件上的回调函数，会永久捕获当前首次渲染帧上下文中的location值——也就是页面加载时的初始值。
后续Redux状态更新触发组件重渲染时，location虽然拿到了最新值，但已经注册到map实例上的旧回调不会被替换，它持有的闭包上下文始终是首次挂载时的上下文，自然永远读不到更新后的location。
第二个useEffect能读到正确值，是因为它会在依赖变化、组件重渲染时重新执行，回调函数捕获的是当前最新渲染帧的上下文，所以能拿到最新的location。

修复方案

你可以根据自己的项目场景选以下任意一种方案解决：

方案1：使用Ref同步最新值（最推荐，不需要反复绑定解绑事件）
利用Ref对象可变、current属性不会被闭包固定的特性，把每次渲染的最新location同步到Ref中，事件回调里直接读取Ref上的值即可：

const CustomMap = (props) => {
  const location = useSelector((state) => state.routing.location);
  // 建一个ref存最新的location
  const latestLocation = useRef(location);

  // 每次location更新就同步到ref
  useEffect(() => {
    latestLocation.current = location;
  }, [location]);

  useEffect(() => {
    // ... 原有map初始化逻辑 ...
    const handleMoveEnd = () => {
      // 不要直接读闭包捕获的location，从ref上取最新值
      console.log(latestLocation.current);
    };
    map.on('moveend', handleMoveEnd);
    // 记得组件卸载时移除监听器，避免内存泄漏
    return () => map.off('moveend', handleMoveEnd);
  }, []);

  useEffect(() => {
    console.log(location);
  }, [/* 你的原有依赖项 */]);
}

方案2：把事件绑定逻辑加入依赖
去掉空依赖，把location加入依赖数组，每次location变化时先解绑旧的事件回调，再绑定捕获了最新值的新回调，缺点是如果location更新频繁，会反复执行绑定解绑操作：
```
useEffect(() => {
  const handleMoveEnd = () => {
    console.log(location);
  };
  map.on('moveend', handleMoveEnd);
  return () => map.off('moveend', handleMoveEnd);
}, [location]);
```
方案3：使用React官方的EffectEvent API（React 19+可用）
React 19提供了专门的useEffectEvent Hook处理这类场景，它会返回一个永远指向最新闭包上下文的函数，不需要加入Effect依赖就能拿到最新的状态：
```
// React 19+ 可用
const handleMoveEnd = useEffectEvent(() => {
  console.log(location);
});

useEffect(() => {
  map.on('moveend', handleMoveEnd);
  return () => map.off('moveend', handleMoveEnd);
}, []);
```

注意：所有在空依赖Effect中注册的、生命周期和组件一致的持久化回调（包括DOM事件、第三方SDK事件、定时器回调等），都会捕获首次渲染的状态与属性，不会随组件重渲染自动更新，这是JavaScript闭包的固有特性，不是React或Redux的Bug。

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