时间戳

首页 > 解决方案 > 未捕获的类型错误：无法读取未定义的属性“addLayer” - PixiOverlay

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

问题描述

这是我的代码：

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：无法在 PixiOverlay.jsx:69 处读取 NewClass.addTo (leaflet-src.js:6559) 处未定义的属性“addLayer”

它在内部调用——

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

这是未定义的。谁能帮我这个？

标签： reactjsleafletpixi.js

解决方案

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

对于在 commitHookEffectListUnmount (react-dom.development.js:19710) 处无法读取 PixiOverlay.jsx:154 处未定义的属性 'getContainer'这个错误，我将 props zoom传递给 map 并且它起作用了

推荐阅读