正在重新渲染 React 传单地图

Question

我是 React 新手，正在开发 covid-19 追踪器应用程序。我有一个国家/地区下拉列表，当我们 select 下拉列表中的任何国家/地区时，就会发出 api 调用，并使用反应挂钩（useState）显示电晕病例、死亡和康复病例。这是使用 onCountryChange 函数发生的；

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.long]);
        setMapZoom(4);
      });
  };

我已经引入了react leaflet map并且有一个state

[ mapCenter, setMapCenter ] = useState({lat: 34.80746, lng: -40.4796})

现在我在 onCountryChange 中设置 setMapCenter([data.countryInfo.lat, data.countryInfo.long]);但地图并未以 selected 国家/地区为中心。任何人都可以帮助我这里出了什么问题。这是 githup 仓库。

https://github.com/sohailshams/covid-19-tracker

Answer 1

首先，您不会在每次发出请求时都更改经纬度坐标。

 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) => {
        console.log(data);
        setCountryInfo(countryCode);
        setCountryInfo(data);
        const {
          countryInfo: { lat, long },
        } = data;
        setMapCenter({ lat, lng: long }); // here change the coordinates of the selected country
      });
  };

其次，使用组件通过将新坐标作为道具传递来更改地图视图，因为更改中心是不够的，因为它在 [=36= 上 不可变 ] 版本

function ChangeMapView({ coords }) {
  const map = useMap();
  map.setView([coords.lat, coords.lng], map.getZoom());

  return null;
}

并在您的地图组件中使用它：

function Map({ 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'
        />
        <ChangeMapView coords={center} /> //here use it by passing the center coords
      </LeafletMap>
    </div>
  );
}

编辑

这是一个demo

我明确地使用了你的 github 代码重现了这个问题，后来我看到你已经改变了一点代码。通过使用这条线

setMapCenter([data.countryInfo.lat, data.countryInfo.long]);

您正在更改变量的类型，它首先是一个对象，然后突然变成了一个数组。我认为你不应该那样做。但最后，如果你想这样做，只需将 ChangeMapView comp 稍微更改为

function ChangeMapView({ coords }) {
  const map = useMap();
  map.setView([coords[0], coords[1], map.getZoom());

  return null;
}

您的问题再次得到解决

正在重新渲染 React 传单地图

Re-rendering of react leaflet map is happening

leaflet

reactjs

react-leaflet