使用 React-leaflet 和 click 事件从 API 数据中绘制多边形

问：

我正在使用 react-leaflet 和 Geoman，在地图上绘制多边形，我有一个 API 为我提供了 GeoJSON。我可以使用 轻松绘制形状，但我正在尝试单击多边形并启用编辑，因此当我单击几次它时，它可以工作，但是在 4 次后我单击以选择顶点开始消失。const polygon = L.polygon(props.coordinates).addTo(context.map);

我的函数绘制多边形

function Polygon(props) {
const context = useLeafletContext();

useEffect(() => {
    const polygon = L.polygon(props.coordinates).addTo(context.map);

    // When click event is triggered
    polygon.on('click', function () {

        // Enable edit mode on polygon
        polygon.pm.toggleEdit({
            snappable: true,
            draggable: true,
        });
    });


    // Clear
    return () => {
        // Disable edit when polygon is removed
        if (polygon.pm && polygon.pm.enabled()) {
            polygon.pm.toggleEdit();
        }
    };
}, [props.coordinates, context.map]);

return null;
}

function Map() {
  return (
    <MapContainer
      id="mapId"
      doubleClickZoom={false}
      style={{ height: "100vh" }}
      center={[-23.1573924, -45.7908461]}
      zoom={18}
      scrollWheelZoom={true}
      ref={mapRef}
    >

      {polygons.map((polygon, index) => (
        <Polygon key={index } coordinates={polygon.geometry.coordinates} />
      ))}

    </MapContainer>
  )
}

当我单击多边形时，它被选中进行编辑，如果单击另一个多边形，顶点将开始消失，如下所示：

因此，多边形的 2 个顶点没有出现。

我应该怎么做才能做对？