我正在使用React和react-leaflet和react-leaflet-draw开发应用程序。
与react-leaflet-draw有关,我有三个事件onCreated,onDeleted和onEdited,在其中我更改了对象列表- listGeofences 。
我还有一个表格,其中显示了该列表中每个对象的详细信息。
在onCreated事件中,我将该列表作为输入传递,它工作正常。 但是在onDeleted和onEdited事件中,我传递的相同输入始终为空。
有什么想法吗?
谢谢
const onCreated = useCallback((e: { layerType: any; layer: any; }) => {
const newState: Geofence[] = [...listGeofences];
var p1 = e.layer._latlngs[0][0];
var p2 = e.layer._latlngs[0][2];
let g: Geofence = new Geofence();
g.xMin = p1.lat;
g.yMax = p1.lng;
g.xMax = p2.lat;
g.yMin = p2.lng;
g.id = e.layer._leaflet_id;
newState.push(g);
setListGeofences(newState as any);
}, [listGeofences]);
const onEdited = useCallback((e: { layers: { eachLayer: (arg0: (layer: any) => void) => void; }; }) => {
const newState: Geofence[] = [...listGeofences];
e.layers.eachLayer((layer) => {
let geoEdited: Geofence = geofencesEdited.find(x => x.id == layer._leaflet_id) as Geofence;
if (geoEdited) {
let index: number = newState.findIndex(x => x.id == geoEdited.id);
var p1 = layer._latlngs[0][0];
var p2 = layer._latlngs[0][2];
newState[index].xMin = p1.lat;
newState[index].yMax = p1.lng;
newState[index].xMax = p2.lat;
newState[index].yMin = p2.lng;
}
});
setListGeofences(newState as any);
}, [listGeofences]);
const onDeleted = useCallback((e: { layers: any }) => {
const newState: Geofence[] = [...listGeofences];
e.layers.eachLayer((layer: { _leaflet_id: number; }) => {
let index: number = newState.findIndex(x => x.id == layer._leaflet_id);
if (index != -1) {
newState.splice(index, 1);
}
});
setListGeofences(newState as any);
}, [listGeofences]);