反应传单映射CircleMarker数组会陷入无限循环

问题描述

我正在使用react-leaflet在我的react应用程序中创建一个Map。在“地图”组件中，我尝试映射国家/地区数组，并为每个国家/地区返回CirclrMarker。当我使用Marker组件执行此操作时，它可以正常运行，但是使用CirclrMarker组件，代码将陷入无限循环。

代码：

import React,{ useState } from 'react'
import { Map,TileLayer,Marker,Popup,Circle,CircleMarker } from 'react-leaflet'
import L from 'leaflet'

import './Map.css'

function LeafletMap({ position,zoom,data }) {
    const markerIcon = L.icon({
        iconSize: [25,41],iconAnchor: [10,popupAnchor: [2,-40],// specify the path here
        iconUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png",shadowUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png"
    });
    return (
        <Map className="map" center={position} zoom={zoom}>
            <TileLayer
                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
             {data.map((country) => {
                return (
                <CircleMarker
                position={{ lat: country.countryInfo.lat,lng: country.countryInfo.long }}>
                    <Popup>{country.country}</Popup>
                </CircleMarker>)
            })} 
            <Marker position={position} zoom={zoom} icon={markerIcon}>
                <Popup> {zoom} </Popup>
            </Marker>
        </Map>
    )
}

export default LeafletMap

您知道为什么会这样吗？

解决方法

为圆形标记添加半径：

<CircleMarker position={{ lat: country.countryInfo.lat,lng: country.countryInfo.long }} radius={100}>
      <Popup>{country.country}</Popup>
</CircleMarker>