React Hooks求助：地图点击时state未更新，useEffect值始终不变

问题根源 #

你的代码存在两个核心问题：

1. 闭包陷阱：地图点击回调创建时会捕获当前渲染周期的layerClick值（初始为false），后续即使state更新，旧回调里的layerClick依然保持旧值，导致每次点击都会触发popupToggler。
2. 重复绑定事件：useEffect依赖layerClick，每次state变化都会给地图重新绑定一个新的点击事件，旧的事件监听未被移除，多个回调叠加后会加剧状态混乱。

解决方案一：清理事件监听 + 简化状态切换 #

修改useEffect，确保每次绑定事件前清理旧监听，同时用函数式更新直接切换状态，不需要依赖当前layerClick的值：

const [layerClick, setLayerClick] = useState(false);

useEffect(() => {
  if (!streetsCurrentHeatStateMap) return;

  // 定义点击回调
  const handleMapClick = () => {
    // 函数式更新直接切换状态，规避闭包问题
    setLayerClick(prevState => !prevState);
  };

  // 绑定事件
  streetsCurrentHeatStateMap.on('click', handleMapClick);

  // 清理函数：组件卸载或依赖变化时移除旧监听
  return () => {
    streetsCurrentHeatStateMap.off('click', handleMapClick);
  };
}, [streetsCurrentHeatStateMap]); // 只依赖地图实例，无需依赖layerClick

对应的popupToggler可以简化或直接删除：

// 若保留该函数，可简化为
const popupToggler = () => {
  setLayerClick(prevState => !prevState);
};

解决方案二：用Ref保存最新状态（适合需判断当前状态的场景） #

如果必须在点击回调里判断当前状态，可通过useRef保存最新的layerClick值，避开闭包陷阱：

const [layerClick, setLayerClick] = useState(false);
const layerClickRef = useRef(layerClick);

// 同步state到ref，确保ref始终保存最新值
useEffect(() => {
  layerClickRef.current = layerClick;
}, [layerClick]);

useEffect(() => {
  if (!streetsCurrentHeatStateMap) return;

  const handleMapClick = () => {
    // 用ref获取最新状态值
    if (!layerClickRef.current) {
      setLayerClick(prevState => !prevState);
    }
  };

  streetsCurrentHeatStateMap.on('click', handleMapClick);

  return () => {
    streetsCurrentHeatStateMap.off('click', handleMapClick);
  };
}, [streetsCurrentHeatStateMap]);

内容的提问来源于stack exchange，提问作者Muhammad Yasir Ali Khan