正在重新渲染反应传单地图

Question

我是 React 和开发 covid-19 跟踪器应用程序的新手。我有一个国家/地区下拉列表，当我们从下拉列表中选择任何国家/地区时，将进行 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 传单地图并有一个状态

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

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

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
      });
  };

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

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

您的问题再次得到解决