首页 > 解决方案 > 在 React js Uncaught RangeError: Maximum call stack size exceeded at shouldFilterFiber at mountFiberRecursively

问题描述

我正在使用 s josn 文件在传单地图上映射和创建新的折线,但出现此错误。该应用程序运行良好,所有折线都显示在地图上,但我在浏览器控制台中收到此错误(未捕获 RangeError:在 mountFiberRecursively 的 shouldFilterFiber 处超出了最大调用堆栈大小)!这是我的代码:

export default class MapLeaflet extends Component {
constructor() {
super();
this.state = {
  lat: 61.7,
  lng: 26.1,
  zoom: 6,
}
}

render() {
const position = [this.state.lat, this.state.lng];
return (
  <Map center={position} zoom={this.state.zoom}>
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
    />
    {coordinates.features.map((element) => (
      <Polyline
        key={element.properties.OBJECTID}
        color="lime"
        positions={element.geometry.coordinates}
      />
    ))}
  </Map>
)
}
}

标签: reactjs

解决方案


对于正在寻找答案的人:问题是因为我试图映射的数组太大,它返回的就像 6000 个折线元素一样。解决方案是将数组分成 2000 的 3 部分,然后分别映射它们。我不确定这是否是正确的方法,但它解决了我的问题。希望它可以帮助某人。


推荐阅读