0
257
VistasLeafletMap muestra un error incluso después de importar el paquete del folleto en reaccionar js
Estaba trabajando en una aplicación de covid que muestra la tasa de mortalidad de covid durante las tres oleadas, particularmente para mi país India , pero aquí el problema es que mientras trato de usar el paquete de folletos, muestra un error
import React from "react"; import { Map as LeafletMap, TileLayer } from "react-leaflet"; import "./Map.css"; import { showDataOnMap } from "./util"; function Map({ countries, casesType, center, zoom }) { return ( <div className="map"> <LeafletMap center={center} zoom={zoom}> <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> {showDataOnMap(countries, casesType)} </LeafletMap> </div> ); } export default Map;este nombre de paquete: Map.js
incluso ejecuté el cmd en la terminal que importa el folleto: npm i react-leaflet , pero aún muestra un error, por favor ayude a cualquiera
Este es un error de host local que está mostrando
2 Respuestas
Responde la pregunta0
Puede usar el siguiente fragmento de código para importar el mapa. Seguramente funcionará:
import { MapContainer as LeafletMap, TileLayer } from "react-leaflet"Necesitamos importar el contenido tal como está desde las dependencias. Entonces, cuando se actualizan las dependencias, este problema puede ocurrir, por lo que debe verificar lo que ha importado.
0
El problema es que está tratando de exportar el mapa de función que tiene el mismo nombre que el mapa que asignó a LeafletMap, intente cambiar el nombre de su función, por ejemplo
import React from "react"; import { Map as LeafletMap, TileLayer } from "react-leaflet"; import "./Map.css"; import { showDataOnMap } from "./util"; function NewMap({ countries, casesType, center, zoom }) { return ( <div className="map"> <LeafletMap center={center} zoom={zoom}> <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> {showDataOnMap(countries, casesType)} </LeafletMap> </div> ); } export default NewMap;