Uncaught TypeError: Cannot read property 'addLayer' of undefined - PixiOverlay

Question

这是我的代码：

import React, { PureComponent } from 'react';
import { PixiOverlay } from 'react-leaflet-pixi-overlay';
import { Map, TileLayer } from 'react-leaflet';
import { renderToString } from 'react-dom/server';

class PixiOverlayClass extends PureComponent {
 render() {
  const markers = [
   {
    id: 'randomStringOrNumber',
    iconColor: 'red', // colors: https://github.com/pointhi/leaflet-color-markers
    position: [-37.814, 144.96332],
    popup: renderToString(<div>All good!</div>),
    onClick: () => alert('marker clicked'),
    tooltip: 'Hey!',
  },
  {
    id: '2',
    position: [-37.814, 144.96332],
    popup: 'Quack!',
    popupOpen: true, // if popup has to be open by default
    onClick: () => alert('marker clicked'),
    tooltip: 'Nice!',
  },
];
return (
  <React.Fragment>
    <Map
      preferCanvas
      maxZoom={20}
      minZoom={3}
      center={[-37.814, 144.96332]}
      // Other map props...
    >
      <TileLayer
        url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
        attribution="&copy; 
        <a href=&quot;https://www.openstreetmap.org/copyright&quot;>OpenStreetMap</a> 
        contributors"
       />
      <PixiOverlay markers={markers} />
    </Map>
  </React.Fragment>
 );
}
}
export default PixiOverlayClass;

这只是简单的代码。

并且我已经添加了所有依赖项 leaflet,leaflet-pixi-overlay, pixi.js,react, react-leaflet, use-leaflet

但我仍然收到错误消息：

TypeError: 无法读取未定义的属性 'addLayer' 在 NewClass.addTo（传单-src.js:6559）在 PixiOverlay.jsx:69

正在内部调用-

   addTo: function (map) {
    map.addLayer(this);
    return this;
 },

这是未定义的。谁能帮我解决这个问题？

Answer 1

升级 react-leaflet 版本有效。谢谢@DrewReese

并且对于 无法读取属性 'getContainer' of undefined at PixiOverlay.jsx:154 at commitHookEffectListUnmount (react-dom.development.js:19710) 这个错误，我通过道具 zoom 来映射并且它起作用了

Uncaught TypeError: Cannot read property 'addLayer' of undefined - PixiOverlay

Uncaught TypeError: Cannot read property 'addLayer' of undefined - PixiOverlay

leaflet

reactjs

pixi.js