Javascript 错误：无效的LatLng对象：（54，未定义）

我正在学习react，我是这方面的初学者，我正在尝试使用react的传单工具制作地图。事实上，当我选择一个特定的国家时，我希望它转到所选的国家，但它会生成一个错误，即“错误：无效的LatLng对象：（54，未定义）”，如果您能给我一个解决问题的方法，那将非常有帮助。我有点复杂，非常感谢

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

function App() {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] = useState('worldwide');
  const [countryInfo, setCountryInfo] = useState({});
  const [tableData, setTableData] = useState([]);
  const [mapCenter, setMapCenter] = useState({ lat: 34.80746, lng: -40.4796});
  const [mapZoom, setMapZoom] = useState(3);
  const [mapCountries, setMapCountries] = 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) => ( //ciudades por la API
          {
            name: country.country, // United States, United Kingdom
            value: country.countryInfo.iso2 // UK, USA, FR
          }
        ));
        
        const sortedData = sortData(data);
        setTableData(sortedData);
        setMapCountries(data);
        setCountries(countries); //Cambio de estado por las ciudades de las api 
      });
    };

    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);
      setCountryInfo(data);  
      
      setMapCenter([data.countryInfo.lat, data.countryInfo.lng]);
      setMapZoom(4);
    });
  };
 
  return (
    <div className="app">
      <div className="app__left">
        <div className="app__header">
          <h1>COVID 19 TRACKER</h1>
          <FormControl className="app__dropdown">
            <Select variant="outlined" onChange={onCountryChange} value={country}>
              <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>

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

      </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;

从'@material ui/core'导入{MenuItem，FormControl，Select，Card，CardContent}；
从“React”导入React，{useState，useffect}；
导入“/App.css”；
从“/InfoBox”导入InfoBox；
从“./Map”导入映射；
从“/Table”导入表；
从“/util”导入{sortData}；
从“/LineGraph”导入线条图；
导入“传单/目录/传单.css”；
函数App（）{
const[countries，setCountries]=useState（[]）；
const[country，setCountry]=useState（“全球”）；
const[countryInfo，setCountryInfo]=useState（{}）；
const[tableData，setTableData]=useState（[]）；
const[mapCenter，setMapCenter]=useState（{lat:34.80746，lng:-40.4796}）；
const[mapZoom，setMapZoom]=useState（3）；
const[mapCountries，setMapCountries]=useState（[]）；
useffect（（）=>{
取回（“https://disease.sh/v3/covid-19/all）然后（（response）=>response.json（））。然后（data=>{
setCountryInfo（数据）；
});
}, []);
useffect（（）=>{
const getCountriesData=async（）=>{
等待取回（“https://disease.sh/v3/covid-19/countries）然后（（响应）=>response.json（））。然后（（数据）=>{
const countries=data.map（（国家）=>（//ciudades por la API
{
名称：country.country，//美国、英国
值：country.countryInfo.iso2//英国、美国、法国
}
));
常数sortedData=sortData（数据）；
可设置数据（sortedData）；
SETMAP国家（数据）；
setCountries（countries）；//坎比奥·德·埃斯塔多·波尔·拉斯阿皮市
});
};
getCountriesData（）；
}, []);
const onCountryChange=异步（事件）=>{
const countryCode=event.target.value；
setCountry（countryCode）；
const url=countryCode==“全球”？'https://disease.sh/v3/covid-19/all' : `https://disease.sh/v3/covid-19/countries/${countryCode}`；
等待获取（url）。然后（（响应）=>response.json（））。然后（（数据）=>{
setCountry（countryCode）；
setCountryInfo（数据）；
setMapCenter（[data.countryInfo.lat，data.countryInfo.lng]）；
setMapZoom（4）；
});
};
返回(
新冠病毒19跟踪器
在全世界
{国家地图（（国家）=>(
{country.name}
))}
按国家分列的活病例
全球新病例
);
};
导出默认应用程序；

接下来我将显示我的地图js文件

import React from 'react';
import './Map.css';
import { Map as LeafletMap, TileLayer } from "react-leaflet";

function Map({countries, 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="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                />
            </LeafletMap>
        </div>
    );
}

export default Map;

从“React”导入React；
导入“./Map.css”；
从“react传单”导入{Map as-传单映射，TileLayer}；
功能图（{国家，中心，缩放}）{
返回(
);
}
导出默认地图；

你能用codesandbox或类似的smth制作一个演示来重现这个问题吗？@kboul非常感谢，但我设法解决了我的问题，这是我的写作问题。