我正在尝试绘制圆圈并在地图上添加弹出窗口，但我不断收到错误消息。无法读取未定义的属性（读取 'lng'）

Question

这段代码来自我的App.js
应用程序打开后，我将其用作地图的默认位置

const [mapCenter, setMapCenter] = useState({lat: 34.80746, lng: -40.4796});
我用它来更新地图的位置，从下拉菜单中选择，我从端点提取的数据中获取纬度和经度

setMapCenter([data.countryInfo.lat, data.countryInfo.lng]);

我将以下道具传递给地图

 ```<Map center={mapCenter}
   zoom={mapZoom}
   countries={mapCountries}
   casesType={casesType}
   />```

这来自我的 utils.js 文件，上述圆圈的颜色根据它们的大小写类型

 ```import { Circle, Popup } from "react-leaflet";

   const casesTypeColors = {
   cases: {
     hex: "#CC1034",
     rgb: "rgb(204, 16, 52)",
    half_op: "rgba(204, 16, 52, 0.5)",
    multiplier: 800,
     },

   recovered: {
    hex: "#7dd71d",
    rgb: "rgb(125, 215, 29)",
    half_op: "rgba(125, 215, 29, 0.5)",
     multiplier: 1200,
   },
     deaths: {
    hex: "#fb4443",
    rgb: "rgb(251, 68, 67)",
     half_op: "rgba(251, 68, 67, 0.5)",
    multiplier: 2000,
    },
    };```

这是我的utilis.js。我正在尝试在地图上绘制圆圈和弹出窗口。控制台错误（未捕获类型错误：无法读取未定义的属性（读取 'lng'）

  ```export const showDataOnMap = (data, casesType = "cases") => (
    data.map((country) => ( 
    <Circle >
    center = {[country.countryInfo.lat, country.countryInfo.long]} 

      fillOpacity = {0.4},
     color={casesTypeColors[casesType].hex},
     fillColor={casesTypeColors[casesType].hex}, 

    radius={
     Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
   } 
    <Popup>
     <h6>Is the POPUP working</h6>
  </Popup>
  </Circle>
    ))
    );```

这是我的Map.js。控制台错误（未捕获类型错误：无法读取未定义的属性（读取 'lng'）

      ```import { showDataOnMap } from './utils';

        function Map({center, zoom, countries, casesType}) {
             return (
           <div className='map'>
   <LeafletMap center={center} zoom={zoom} scrollWheelZoom={false} >
      <TileLayer
      attribution='&copy; <a 
      href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
         {showDataOnMap(countries, casesType)} 
   </LeafletMap>
              </div>
         )
          }

          export default Map```

Answer 1

问题出在您呈现 Circle:

的 showDataOnMap 函数中

<Circle >
    center = {[country.countryInfo.lat, country.countryInfo.long]} 
    fillOpacity = {0.4},
    color={casesTypeColors[casesType].hex},
    fillColor={casesTypeColors[casesType].hex}, 
    radius={
     Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
    } 
  <Popup>
    <h6>Is the POPUP working</h6>
  </Popup>
</Circle>

Circle 的所有属性（center、fillOpacity、color 等）都是在您用 > 关闭 Circle 元素后定义的.这应该更改为：

<Circle
      center={[country.countryInfo.lat, country.countryInfo.long]}
      fillOpacity={0.4}
      color={casesTypeColors[casesType].hex}
      fillColor={casesTypeColors[casesType].hex}
      radius={
        Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
      }
    >

有一个工作演示 here 可以渲染圆圈。

我正在尝试绘制圆圈并在地图上添加弹出窗口，但我不断收到错误消息。无法读取未定义的属性（读取 'lng'）

I am trying to draw circles and add popup on a map, but i keep getting errors. Cannot read properties of undefined (reading 'lng')

javascript

reactjs

react-hooks

react-component

react-leaflet