Tengo un mapa que muestra una capa geoJSON usando react-leaflet leaflet. Estoy cambiando dinámicamente lo que se representa usando leaflet-draw .

Estoy usando un ciclo para encontrar las capas que no cumplen con los criterios, luego las guardo para poder agregarlas más tarde según el código a continuación.

 const [removedLayers, setRemovedLayers] = useState([]); const [removedMarkers, setRemovedMarkers] = useState([]); const onCreatePolygon = (e) => { const geojsonLayers = ref.current; let [tempLayers, tempMarkers] = [[], []]; //remove polygons that meet criteria geojsonLayers.eachLayer((layer) => { if (!e.layer.contains(layer.getCenter())) { tempLayers.push(layer); layer.remove(); } }); //remove markers that meet criteria const markerGroup = markerRef.current; markerGroup.eachLayer((layer) => { if (!e.layer.contains(layer.getLatLng())) { tempMarkers.push(layer); layer.remove(); } }); e.layer.remove(); setRemovedLayers(tempLayers); setRemovedMarkers(tempMarkers); return ""; };

El problema es que tanto removedLayers como los marcadores removedMarkers están vacíos. Entiendo que es asíncrono, por lo que no es instantáneo, pero parece que no importa cuánto tiempo espere, todavía está vacío.

Lo que me lleva a pensar que setState se está ejecutando mientras el ciclo for aún se está ejecutando. Agregar más ganchos parece enrevesado, ¿cuál es la mejor manera de resolver esto?