如何解决 react-leaflet 导出错误？

Question

我想为我的项目在 React js 中渲染地图。因此，为此我使用代码 npm i react-leaflet 安装了 react-leaflet，还在终端中安装了 npm i leaflet 并输入了一些用于 react leaflet 的代码。代码如下：这是我的 Map.JS 文件：

    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'
            />
          </LeafletMap>
        </div>
      );
    }

export default Map;

这是我的 App.js 文件：

import {
  Card,
  CardContent,
  FormControl,
  MenuItem,
  Select,
} from '@material-ui/core';
import { useEffect, useState } from 'react';
import InfoBox from './InfoBox';
import './App.css';
import Table from './Table';
import { sortData } from './utl';
import LineGraph from './LineGraph';
import MapContainer from './Map';
import "leaflet/dist/leaflet.css";

function App() {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] = useState('worldwide');
  const [countryInfo, setCountryInfo] = useState({});
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    fetch('https://disease.sh/v3/covid-19/all')
      .then((response) => response.json())
      .then((data) => {
        setCountryInfo(data);
      });
  }, []);

  useEffect(() => {
    const getCountriesData = async () => {
      await fetch('https://disease.sh/v3/covid-19/countries')
        .then((response) => response.json())
        .then((data) => {
          const countries = data.map((country) => ({
            name: country.country,
            value: country.countryInfo.iso2,
          }));
          const sortedData = sortData(data);
          setTableData(sortedData);
          setCountries(countries);
        });
    };
    getCountriesData();
  }, []);

  const onCountryChange = async (event) => {
    const countryCode = event.target.value;
    setCountry(countryCode);
    const url =
      countryCode === 'worldwide'
        ? 'https://disease.sh/v3/covid-19/all'
        : `https://disease.sh/v3/covid-19/countries/${countryCode}`;
    await fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setCountry(countryCode);
        // All of the Data... from the country response
        setCountryInfo(data);
      });
  };

  console.log('fnfun', countryInfo);

  return (
    <div className='app'>
      <div className='spp_left'>
        <div className='app_header'>
          <h1>COVID-19 TRACKER</h1>
          <FormControl className='app_dropdown'>
            <Select
              variant='outlined'
              value={country}
              onChange={onCountryChange}
            >
              <MenuItem value='worldwide'>Worldwide</MenuItem>
              {countries.map((country) => (
                <MenuItem value={country.value}>{country.name}</MenuItem>
              ))}
            </Select>
          </FormControl>
        </div>
        <div className='app_stats'>
          <InfoBox
            title='Coronavirus Cases'
            cases={countryInfo.todayCases}
            total={countryInfo.cases}
          />
          <InfoBox
            title='Recovered'
            cases={countryInfo.todayRecovered}
            total={countryInfo.recovered}
          />
          <InfoBox
            title='Deaths'
            cases={countryInfo.todayDeaths}
            total={countryInfo.deaths}
          />
        </div>
        <MapContainer />
      </div>
      <Card className='app_right'>
        <CardContent>
          <h3>Live Cases by Country</h3>
          <Table countries={tableData} />
          <h3>Worldwide New Cases</h3>
          <LineGraph />
        </CardContent>
      </Card>
    </div>
  );
}

export default App;

但问题是它显示错误：

Failed to compile ./src/Map.js Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').

此错误发生在构建期间，无法消除。

Answer 1

以下是解决您的问题的步骤：

由于 react-leaflet api 从版本 2.x 更改为 3.x，因此将导入更改为 import { MapContainer as LeafletMap, TileLayer } from "react-leaflet";。
删除地图组件上的这一行import { showDataOnMap } from './util';

如何解决 react-leaflet 导出错误？

How to resolve the react-leaflet export error?

reactjs

react-redux

react-leaflet

react-leaflet-v3