如何解决Mapbox GL Draw中useEffect闭包导致的事件重复触发问题

在React项目中使用Mapbox GL Draw实现地图绘制功能时，开发者经常会遇到事件重复触发的问题，这类问题大多和useEffect的闭包特性有关，会导致绘制、编辑等操作的事件被多次绑定，引发功能异常。

问题产生的核心原因

useEffect的执行机制会捕获其创建时的props、state等变量值，形成闭包。如果useEffect的依赖项设置不合理，或者事件监听函数没有正确清理，就会出现每次组件更新时重复绑定Mapbox GL Draw事件的情况。

常见的错误场景是直接在useEffect中绑定Draw的事件，但是没有把相关的状态或者函数作为依赖项，或者依赖项变化后没有清理之前的事件监听，导致旧的事件监听依然存在，新的监听又不断添加。

问题复现示例

下面是一个典型的错误代码示例，会出现事件重复触发的问题：

import { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';

const MapDrawComponent = () => {
  const mapRef = useRef(null);
  const drawRef = useRef(null);
  const [drawMode, setDrawMode] = useState('simple_select');

  useEffect(() => {
    // 初始化地图
    const map = new mapboxgl.Map({
      container: 'mapContainer',
      style: 'mapbox://styles/mapbox/streets-v12',
      center: [116.397428, 39.90923],
      zoom: 12
    });

    // 初始化Draw实例
    const draw = new MapboxDraw({
      displayControlsDefault: false,
      controls: {
        line_string: true,
        polygon: true,
        trash: true
      }
    });
    map.addControl(draw);
    mapRef.current = map;
    drawRef.current = draw;

    // 错误的事件绑定方式，依赖项设置不当
    map.on('draw.create', (e) => {
      console.log('创建了绘制要素', e.features);
      setDrawMode('simple_select');
    });

    return () => {
      map.remove();
    };
  }, [drawMode]); // drawMode变化时会重新执行useEffect，重复绑定事件

  return (
    <div>
      <div id="mapContainer" style={{ width: '100%', height: '500px' }}></div>
      <button onClick={() => setDrawMode('draw_line_string')}>绘制线</button>
    </div>
  );
};

上面的代码中，useEffect的依赖项包含drawMode，每次drawMode变化都会重新执行effect，而之前的draw.create事件监听没有被清理，就会导致每次触发draw.create时，console.log会执行多次。

解决方案

方案一：正确设置依赖项并清理事件监听

在useEffect中绑定事件时，需要在清理函数中移除对应的事件监听，同时合理设置依赖项，避免不必要的重复执行。

useEffect(() => {
  const map = mapRef.current;
  const draw = drawRef.current;
  if (!map || !draw) return;

  const handleDrawCreate = (e) => {
    console.log('创建了绘制要素', e.features);
    setDrawMode('simple_select');
  };

  // 绑定事件
  map.on('draw.create', handleDrawCreate);

  // 清理函数，移除事件监听
  return () => {
    map.off('draw.create', handleDrawCreate);
  };
}, []); // 只在组件挂载时执行一次，避免重复绑定

方案二：使用useRef保存最新函数引用

如果事件处理函数依赖了最新的state或者props，可以使用useRef来保存最新的函数引用，避免闭包捕获旧值，同时不需要频繁修改useEffect的依赖项。

const handleDrawCreateRef = useRef();

useEffect(() => {
  // 每次组件更新时，更新ref中的函数引用
  handleDrawCreateRef.current = (e) => {
    console.log('创建了绘制要素', e.features);
    setDrawMode('simple_select');
  };
});

useEffect(() => {
  const map = mapRef.current;
  const draw = drawRef.current;
  if (!map || !draw) return;

  const handler = (e) => {
    handleDrawCreateRef.current?.(e);
  };

  map.on('draw.create', handler);

  return () => {
    map.off('draw.create', handler);
  };
}, []);

方案三：将Draw实例相关操作抽离到ref中

可以把Draw的事件绑定、模式切换等操作都通过ref来访问，避免useEffect依赖变化导致的重复执行问题。

useEffect(() => {
  const map = new mapboxgl.Map({
    container: 'mapContainer',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [116.397428, 39.90923],
    zoom: 12
  });

  const draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
      line_string: true,
      polygon: true,
      trash: true
    }
  });
  map.addControl(draw);
  mapRef.current = map;
  drawRef.current = draw;

  const handleDrawCreate = (e) => {
    console.log('创建了绘制要素', e.features);
  };
  map.on('draw.create', handleDrawCreate);

  return () => {
    map.off('draw.create', handleDrawCreate);
    map.remove();
  };
}, []);

// 切换绘制模式时，直接通过ref调用Draw的方法
const changeDrawMode = (mode) => {
  drawRef.current?.changeMode(mode);
};

排查建议

如果遇到事件重复触发的问题，可以按照以下步骤排查：

• 检查useEffect的依赖项是否合理，是否存在不必要的依赖导致effect频繁执行
• 检查事件绑定是否有对应的清理逻辑，是否在组件卸载或者effect重新执行时移除了旧的事件监听
• 使用console.log打印事件触发的次数，确认是否是多次绑定导致的问题
• 检查是否有多个地方绑定了同一个Draw事件，导致触发时执行多次回调

通过以上方法，基本可以解决Mapbox GL Draw中useEffect闭包导致的事件重复触发问题，保障地图绘制功能的正常运行。

Mapbox_GL_DrawuseEffect闭包事件重复触发修改时间：2026-07-02 20:48:47