反应传单地图无法正常工作

Question

Trying to create a Map using react-leaflet to show data based on Covid-19 worldwide. Fetching the data from API and show them on the map. The map is not displaying the data in the map rather getting an error like

cannot read property 'initialize' of undefined leaflet

The map.js where the map is initialized

import React from 'react'
import '../componentsstyle/Map.css'
import {Map as MapContainer,TileLayer} from 'react-leaflet'
import { showDataOnMap } from './utils';

function Map({countries,center,zoom,casesType}) {

    return (
        <div className="map">
            <MapContainer center={center} zoom={zoom}>
            <TileLayer
            attribution='&copy; <a href="https://carto.com/">carto.com</a> contributors'         
            url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png"
            />
            {showDataOnMap(countries,casesType)}
            </MapContainer>
        </div>
    )
}

export default Map;

The Utils.js is providing necessary functions and the function ShowDataOnMap is used to getting the data from the props and drawing some circles based on the number of cases.

Utils.js

import React from 'react'
import numeral from 'numeral'
import { Circle,Popup } from 'leaflet';

const casesTypeColors = {
    cases: {
      hex: "#CC1034",
      mulitiplier: 800,
    },
  
    recovered: {
      hex: "#7DD71D",
      mulitiplier: 1200,
    },
  
    deaths: {
      hex: "#C0C0C0",
      mulitiplier: 2000,
    },
  };


export const sortData=(data)=>{
    const sortedData=[...data]

    sortedData.sort((firstCountry,secondCountry)=>{
        if(firstCountry.cases>secondCountry.cases){
            return -1;
        }

        else{
            return 1;
        }
    })

    return sortedData
}

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>
        <h1>I am a PopUp</h1>
      </Popup>
      </Circle>
  ))

This is where the map component is called.

<Map
   countries={MapCountries}
   center={mapCenter}
   zoom={mapZoom}/>

The MapCountries,mapCenter and mapZoom values are fine.

I'm using react-leaflet@2.8.0 and leaflet@1.7.1. Faced some difficulties with the recent updated version. So, I had to used them.

Answer 1

'Map' is defined in two places. import {Map as MapContainer,TileLayer} from 'react-leaflet'

and in

function Map({countries,center,zoom,casesType}) {

Here you are using Mapcontainer instead of alias 'Map'

Just remove the alias 'Map' in the import.