即使在 React js 中導入 leaflet package 后，LeafletMap 仍顯示錯誤

Question

我正在開發一個 covid 應用程序，它顯示所有三波中的 covid 死亡率，特別是對於我的國家印度，但這里的問題是當我嘗試使用 leaflet package 時，它顯示錯誤

 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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> {showDataOnMap(countries, casesType)} </LeafletMap> </div> ); } export default Map;

這個 package 名稱：Map.js

即使我已經在導入 leaflet 的終端中運行 cmd: npm i react-leaflet ，但它仍然顯示錯誤，請幫助任何人

這是它顯示的本地主機錯誤

Answer 1

您可以使用下面的代碼片段導入 Map。它肯定會起作用：

import { MapContainer as LeafletMap, TileLayer } from "react-leaflet"

我們需要從依賴項中導入內容。 因此，當依賴項更新時，可能會出現此問題，因此您需要檢查導入的內容。

Answer 2

問題是您正在嘗試導出 function Map 與您分配給 LeafletMap 的 Map 同名，例如，嘗試更改您的 function 名稱

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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {showDataOnMap(countries, casesType)}
      </LeafletMap>
    </div>
  );
}

export default NewMap;