useCallback输入为空

时间:2020-05-12 14:37:03

标签: reactjs react-leaflet react-leaflet-draw

我正在使用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]);

0 个答案:

没有答案