react-传单。映射CircleMarker数组会进入无限循环

Question

我正在使用react-leaflet在我的react应用程序中创建地图。在Map组件中，我尝试映射一个国家数组，并返回每个国家的CirclrMarker。当我使用标记组件执行此操作时，它可以正常运行，但使用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, 41],
        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

你知道为什么会发生这样的事情吗？

Answer 1

向圆形标记添加半径：

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