快速安装和卸载地图时反应传单错误答案

【问题标题】：react-leaflet error when quickly mounting and unmounting map快速安装和卸载地图时反应传单错误
【发布时间】：2022-11-17 07:50:24
【问题描述】：

我注意到当非常快速地挂载和卸载我的传单地图时，我遇到了以下错误：

TypeError: el is undefined

  244 |     // this method is only used for elements previously positioned using setPosition,
  245 |     // so it's safe to cache the position for performance
  246 | 
> 247 |     return el._leaflet_pos || new Point(0, 0);
  248 | }
  249 | 
  250 | // @function disableTextSelection()

我的代码如下所示

const MapComponent = ({ locations }) => {
  const map = useMap();

  const centerAroundMarkers = useCallback(() => {
    if (locations?.length > 0) {
      const bounds = L.latLngBounds();

      locations?.forEach((location) => {
        bounds.extend(L.latLng([location.y, location.x]));
      });
      map.fitBounds(bounds.pad(0.15));
    }
  }, [locations, map]);

  useEffect(() => {
    centerAroundMarkers();
  }, [centerAroundMarkers]);

  const viewerResize = useCallback(
    () =>
      debounce(() => {
        map.invalidateSize();
        centerAroundMarkers();
      }, 100),
    [centerAroundMarkers, map]
  );

  useEffect(() => {
    const resizeObserver = new ResizeObserver(viewerResize);
    resizeObserver.observe(map._container);

    return () => {
      console.log('unmount');
      console.log(map);
      resizeObserver.unobserve(map._container);
    };
  }, [viewerResize, map]);

  return null;
};


const HostsMap = ({ locations }) => {
  const classes = useStyles();

  return (
      <MapContainer
        className={classes.mapContainer}
        dragging={false}
        bounds={[
          [-80, -160],
          [80, 160],
        ]}
        maxZoom={25}
        zoomControl={false}
        scrollWheelZoom={false}
        doubleClickZoom={false}
        boxZoom={false}
        touchZoom={false}
        keyboard={false}
        touchExtend={false}
        tap={false}
        zoomSnap={0.1}
      >
        <MapComponent locations={locations} />
        <>
          <TileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            maxNativeZoom={18}
            maxZoom={25}
            noWrap={false}
          />
        </>
      </MapContainer>
  );
};

由于错误是在相当快地安装和卸载时触发的，我想我没有清理某些东西或者清理时间太长并且我已经在清理之前回来了。 resizeObserver 是可疑的，但我看不出我不会在这里清理什么。

【问题讨论】：

标签： reactjs leaflet react-leaflet

【解决方案1】：

这是一种将地图重新调整为给定标记的超级奇怪的策略。你最好使用 map.on('moveend') 事件：

import { useMapEvents } from "react-leaflet";

const MapComponent = ({ locations }) => {
    const map = useMapEvents({
        moveend: () => {
            const bounds = L.latLngBounds();

            locations.forEach(location => {
                bounds.extend(L.latLng([location.y, location.x]));
            });

            map.fitBounds(bounds);
        },
    });

    return null;
};

【讨论】：