React-Leaflet 地图未在地图上呈现数据

Question

Props coming from App.js like below

<div className="app__maps">
  <h3>I am map</h3>
  <Map countries={mapCountries} center={mapCenter} zoom={mapZoom} />
</div>

Map.js code as follows, Data is fine but inside showDataOnMap() is not adding circle in MapContainer

import React from "react";
import "./Map.css";
import { MapContainer, TileLayer, Marker, Popup, Circle } from "react-leaflet";

const casesTypeColors = {
  cases: { hex: "#cc1034", multiplier: 800, },
  recovered: {hex: "#7dd71d", multiplier: 1200, },
  death: { hex: "#fb4443", multiplier: 2000, },
}; 
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>
        <h4>I am popup</h4>
      </Popup>
    </Circle>;
  });
};

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

        {showDataOnMap(countries, casesType)}
      </MapContainer>
    </div>
  );
}

export default Map;

Data Generating like below data image

please help why data is not rendering on my map? result should be like below image

Answer 1

你没有returning showDataOnMap 里面的任何东西，这就是你看不到任何圆圈的原因。使用 return 关键字或不使用花括号 return 循环的结果和函数本身。

const showDataOnMap = (data, casesType = "cases") => {
  return data.map((country) => {
    return <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>
        <h4>I am popup</h4>
      </Popup>
    </Circle>;
  });
};

Demo

React-Leaflet 地图未在地图上呈现数据

React-Leaflet map is not rendering data on map

javascript

dictionary

reactjs

react-leaflet