未捕获的类型错误：无法读取未定义的属性“addLayer” - PixiOverlay答案

【问题标题】：Uncaught TypeError: Cannot read property 'addLayer' of undefined - PixiOverlay未捕获的类型错误：无法读取未定义的属性“addLayer” - PixiOverlay
【发布时间】：2020-09-26 00:01:13
【问题描述】：

这是我的代码：

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 (leaflet-src.js:6559) 在 PixiOverlay.jsx:69

它在内部调用-

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

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

【问题讨论】：

奇怪的是，我可以看到您的代码和演示之间的唯一区别是您的代码是基于类的组件与功能组件。我不认为 应该引起任何问题，但似乎react-leaflet-pixi-overlay 使用挂钩来访问一些地图上下文/参考。 github.com/knapcio/react-leaflet-pixi-overlay/blob/master/src/…。也许存在版本控制问题，您拥有的 react-leaflet 版本没有提供此上下文/参考。
嗨@DrewReese，升级 react-leaflet 有效。感谢您的帮助
但现在显示错误 Cannot read property 'getContainer' of undefined at PixiOverlay.jsx:154 at commitHookEffectListUnmount (react-dom.development.js:19710) 。它在内部调用return () => pixiOverlay && pixiOverlay.utils.getContainer().removeChildren();。 @DrewReese 您对此也有任何解决方案。

标签： reactjs leaflet pixi.js

【解决方案1】：

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

对于 Cannot read property 'getContainer' of undefined at PixiOverlay.jsx:154 at commitHookEffectListUnmount (react-dom.development.js:19710) 这个错误，我通过了 props zoom 进行映射，它起作用了

【讨论】：