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

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

// 假设 defineFeature 是一个状态变量，其结构包含 holeNum 和 featureType
// const [defineFeature, setDefineFeature] = useState(null);

function MapComponent({ defineFeature }) {
    const mapContainer = useRef(null);
    const map = useRef(null);
    const draw = useRef(null);

    useEffect(() => {
        // 初始化地图和Draw插件
        if (map.current) return; // initialize map only once
        map.current = new mapboxgl.Map({
            container: mapContainer.current,
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [-74.5, 40],
            zoom: 9
        });
        draw.current = new MapboxDraw({
            displayControlsDefault: false,
            controls: {
                line_string: true,
                trash: true
            }
        });
        map.current.addControl(draw.current);
    }, []);

    useEffect(() => {
        console.dir("In useEffect to initialize draw_create...");
        /* POINT 1 */
        if (defineFeature === null) {
            console.dir("defineFeature is null at POINT 1");
        } else {
            console.dir("Value of defineFeature at POINT 1: " + defineFeature.holeNum + ", " + 
            defineFeature.featureType);
        }

        map.current.on('draw.create', ()=> {
            /* POINT 2 */
            if (defineFeature === null) {
                console.dir("defineFeature is null at POINT 2");
            } else {
                console.dir("Value of defineFeature at POINT 2: " + defineFeature.holeNum + ", " + 
                defineFeature.featureType);
            }
            // 此处处理绘制的LineString，但会因defineFeature的旧值而出现问题
            // ...
        });
    }, [defineFeature]); // defineFeature 作为依赖项

    return <div ref={mapContainer} style={{ width: '100%', height: '500px' }} />;
}

export default MapComponent;

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

function MapComponent({ defineFeature }) {
    const mapContainer = useRef(null);
    const map = useRef(null);
    const draw = useRef(null);

    useEffect(() => {
        // 初始化地图和Draw插件
        if (!map.current) { // initialize map only once
            map.current = new mapboxgl.Map({
                container: mapContainer.current,
                style: 'mapbox://styles/mapbox/streets-v11',
                center: [-74.5, 40],
                zoom: 9
            });
            draw.current = new MapboxDraw({
                displayControlsDefault: false,
                controls: {
                    line_string: true,
                    trash: true
                }
            });
            map.current.addControl(draw.current);
        }

        // 定义事件处理函数
        const processDrawnFeature = () => {
            // 在这里，defineFeature 总是最新的值
            if (defineFeature === null) {
                console.dir("defineFeature is null inside processDrawnFeature (latest)");
            } else {
                console.dir("Value of defineFeature inside processDrawnFeature (latest): " + 
                defineFeature.holeNum + ", " + defineFeature.featureType);
            }
            // 你的业务逻辑来处理绘制的LineString
            const data = draw.current.getAll();
            if (data.features.length > 0) {
                const latestFeature = data.features[data.features.length - 1];
                console.log("Latest drawn feature:", latestFeature);
                // 使用 defineFeature 的最新值进行处理
                // 例如：latestFeature.properties.holeNum = defineFeature.holeNum;
            }
            draw.current.deleteAll(); // 清理绘制的特征
        };

        // 绑定事件监听器
        map.current.on('draw.create', processDrawnFeature);

        // 返回清理函数
        return () => {
            map.current.off('draw.create', processDrawnFeature);
        };
    }, [defineFeature]); // defineFeature 作为依赖项

    return <div ref={mapContainer} style={{ width: '100%', height: '500px' }} />;
}

export default MapComponent;