TypeError:无法读取未定义的属性(读取“_leaflet_events”)

Question

我正在使用leaflet v1.8.0和react-leaflet v4.0.1在我的Next.js应用程序中。我在里面有一个map容器组件和标记组组件。以前它运行良好，但是在后端进行了一些数据库更改并相应地修复了前端之后，每当我尝试用map容器组件加载页面时，我就会收到类似的错误。

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading '_leaflet_events')

Call Stack
addOne
node_modules\leaflet\dist\leaflet-src.esm.js (2789:0)
on
node_modules\leaflet\dist\leaflet-src.esm.js (2718:0)
NewClass._addFocusListenersOnLayer
node_modules\leaflet\dist\leaflet-src.esm.js (10894:0)
NewClass._addFocusListeners
node_modules\leaflet\dist\leaflet-src.esm.js (10887:0)
NewClass.fire
node_modules\leaflet\dist\leaflet-src.esm.js (599:0)
NewClass._layerAdd
node_modules\leaflet\dist\leaflet-src.esm.js (6827:0)
NewClass.whenReady
node_modules\leaflet\dist\leaflet-src.esm.js (4583:0)

我有这样一个映射容器组件CameraSitesMap.js：

import { MapContainer, TileLayer, ZoomControl } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import 'leaflet-defaulticon-compatibility'
import 'leaflet-area-select'
    ...    
    return (
            <div css={styles.mapContainer}>
              {isLoading ? (
                <div css={styles.loader}>
                  <Spinner />
                </div>
              ) : (
                <MapContainer
                  preferCanvas={true}
                  bounds={mapBounds}
                  zoomControl={false}
                  scrollWheelZoom={false}
                  doubleClickZoom={false}
                  boxZoom={false}
                  style={{ height: '100%', width: '100%' }}
                  attributionControl={false}
                >
                  <ZoomControl position="bottomleft" />
                  {cameraView || isExploreMode() ? (
                    <AreaSelector setSelectionArea={setSelectionArea} />
                  ) : null}
                  <TileLayer
                    attribution='<img src="https://www.onemap.gov.sg/docs/maps/images/oneMap64-01.png" style="height:20px;width:20px;"/> OneMap | Map data &copy; contributors, <a href="http://SLA.gov.sg">Singapore Land Authority</a>'
                    url="https://maps-{s}.onemap.sg/v3/Default/{z}/{x}/{y}.png"
                  />
                  {!isExploreMode() ? (
                    !cameraView ? (
                      <SiteLocations />
                    ) : (
                      <CameraLocations />
                    )
                  ) : (
                    <>
                      <SiteLocations />
                      <CameraLocations />
                    </>
                  )}
                </MapContainer>
              )}
            </div>
          )

它基本上将一个映射呈现到页面组件中，并为不同的标记组( <SiteLocations />和<CameraLocations /> )提供某种视图切换逻辑。

这就是SiteLocations.js的样子：

import { Circle, Tooltip, useMap } from 'react-leaflet'
...
const SiteLocations = () => {
  const map = useMap()
  ...

  useEffect(() => {
    setMap(map)  // just storing instance in zustand store for another component
  }, [])

  const processedSitesData = isExploreMode() ? exploringSite : allSites;

  return (
    <>
      {processedSitesData?.map((site) => {
        const id = site?.id
        const { name } = site?.attributes
        const { lat, lng, area } = site?.attributes
        const position = [lat, lng]

        // console.log(id, name, lat, lng, area) 
        // none of these logs are undefined
        return (
          <Circle
            center={position}
            radius={area}
            weight={1}
            color="blue"
            key={id}
            css={styles.circleMarker}
            eventHandlers={{
              click: () => !isExploreMode() && setExploreSite(site),
            }}
          >
            {!isExploreMode() && (
              <Tooltip>This is a placeholder.</Tooltip>  // The error doesn't occur and the circle is correctly rendered if I replace this line with <></>.
            )}
          </Circle>
        )
      })}
    </>
  )
}

如果我删除工具提示，错误就会消失，圆圈本身就会完美地呈现出来。在数据库更改之前，是很好的。所以我尝试记录组件中使用的数据，但是它们都有正确的值，而且不是未定义的。我已经尝试删除node_modules和重新安装纱线，以防止包装安装不当。我也在浏览器中尝试过清晰的站点数据。如果我添加工具提示，仍然会发生错误。请帮帮忙。

Answer 1

我找到了解决办法，各位。耽误您时间，实在对不起。

我不得不更新我的react-leaflet leaflet 和包版本。根据发行说明：https://github.com/Leaflet/Leaflet/releases，这似乎是传单库本身的一个bug，并在leaflet v1.9.2中解决了。