React-Leaflet：未捕获TypeError：pointToLayer不是函数

Posted 2021-04-13

我正在尝试在GeoJSON组件中使用pointToLayer参数。我在组件外部定义了函数pointToLayer（不同的文件），我得到了这个错误。

Map.js：

import {pointToLayer} from '../helpers/helper-country-point';
<GeoJSON>
      key={_.uniqueId()}
      data={this.props.activeCountry.geojson}
      pointToLayer={pointToLayer(this)}
 ></GeoJSON>

文件../helpers/helper-country-point是：

import L from 'leaflet';
export function pointToLayer(feature, latlng) {
  return L.circleMarker(latlng, {
    color: 'white',
    fillColor: 'white',
    fillOpacity: .8,
    radius: 3,
    stroke: false
  }).bindPopup("MESSAGE") // Change marker to circle
}

当我在Map.js中定义pointToLayer并使用：

<GeoJSON
 key={_.uniqueId()}
 data= {this.props.countrySelected.geojson}
 pointToLayer={this.pointToLayer.bind(this)}
 ></GeoJSON>

有用。知道为什么我一直收到这个错误吗？

答案

在第一个中，您正在调用该函数并使用this作为参数。

在第二个中，您没有调用该函数。你只是将函数作为道具传递。您可以尝试在第一个示例中删除(this)部分，因此您只能在不调用它的情况下传递函数。

然后，由于错误是pointToLayer不是函数，并且当你在map.js中声明函数时它被解析，我怀疑你可能写了错误的路径到helper.js文件。