更新后 React-Leaflet 不会在整个状态上渲染 Map

Answer 1

好吧，我决定完全重构我的代码，并从我之前的 class 组件切换到 function 组件。

我实现的解决方案来自this answer。

关键是将以下函数添加到我的代码中：

/*
 Function to move the map to the center of the markers after the map
 is loaded with new data and with the correct zoom.
*/
function FlyMapTo(props) {
  const map = useMap();

  useEffect(() => {
    map.flyTo(props.center, props.zoom);
  });

  return null;
}

之后，我将此组件添加到负责渲染组件的 JSX：

return (
  <MapContainer center={center} zoom={zoom} scrollWheelZoom={true}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    {items.map((item, index) => (
      <div key={index}>
        <MyMarker
          name={item.Name}
          city={item.City}
          prov={item.Province}
          lat={item.Latitude}
          lng={item.Longitude}
          phone={item["Phone Number"]}
        />
      </div>
    ))}
    <FlyMapTo center={center} zoom={zoom} />
  </MapContainer>
);

仅供参考，以防有人遇到类似问题，我将添加我的新 Map.js 组件的完整代码：

import React, { useState, useEffect } from "react";
import "./MapObject.css";
import { MapContainer, TileLayer } from "react-leaflet";
import MyMarker from "./MyMarker";
import { useMap } from "react-leaflet";

/*
  IMPORTANT: We are NOT taking into consideration the earth's curvature in
             neither getCenter nor getZoom. This is only left as it is for
            the time being because it is not mission critical
*/

// Function to calculate center of the map based on latitudes and longitudes in the array
function getCenter(json) {
  // Array to store latitude and longitude
  var lats = [];
  var lngs = [];
  const arr = Object.keys(json).map((key) => [key, json[key]]);

  // Loop through the array to get latitude and longitude arrays
  for (let i = 0; i < arr.length; i++) {
    lats.push(arr[i][1].Latitude);
    lngs.push(arr[i][1].Longitude);
  }
  const lat = lats.reduce((a, b) => a + b) / lats.length;
  const lng = lngs.reduce((a, b) => a + b) / lngs.length;
  return [lat, lng];
}

// Function to get the zoom level of the map based on the number of markers
function getZoom(json) {
  // Array to store latitude and longitude
  var lats = [];
  var lngs = [];
  const arr = Object.keys(json).map((key) => [key, json[key]]);

  // Loop through the array to get latitude and longitude arrays
  for (let i = 0; i < arr.length; i++) {
    lats.push(arr[i][1].Latitude);
    lngs.push(arr[i][1].Longitude);
  }
  const zoom = Math.floor(Math.log2(lats.length)) + 8;
  return zoom;
}

// Function to move the map to the center of the markers after the map is loaded with new data
function FlyMapTo(props) {
  const map = useMap();

  useEffect(() => {
    map.flyTo(props.center, props.zoom);
  });

  return null;
}

export default function Map(props) {
  const [zoom, setZoom] = useState(null);
  const [center, setCenter] = useState([null, null]);
  const [items, setItems] = useState([]);
  const [dataIsLoaded, setDataIsLoaded] = useState(false);

  useEffect(() => {
    fetch(
      `https://pandi-bi-backend.herokuapp.com/api/v1/${props.filterType}/${props.filterValue}`
    )
      .then((res) => res.json())
      .then((json) => {
        if (json["detail"] === "Not Found") {
          setItems([]);
          setDataIsLoaded(false);
        } else {
          setItems(json);
          setDataIsLoaded(true);
          setCenter(getCenter(json));
          setZoom(getZoom(json));
        }
      });
  }, [props.filterType, props.filterValue]);

  // If data is not loaded, show an empty map
  if (!dataIsLoaded && items.length === 0) {
    return (
      <MapContainer
        center={{ lat: 45.0, lng: 12.0 }}
        zoom={5}
        scrollWheelZoom={true}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    );
    // If data is loaded, show the map with markers
  } else if (dataIsLoaded) {
    return (
      <MapContainer center={center} zoom={zoom} scrollWheelZoom={true}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {items.map((item, index) => (
          <div key={index}>
            <MyMarker
              name={item.Name}
              city={item.City}
              prov={item.Province}
              lat={item.Latitude}
              lng={item.Longitude}
              phone={item["Phone Number"]}
            />
          </div>
        ))}
        <FlyMapTo center={center} zoom={zoom} />
      </MapContainer>
    );
  }
}