React Mapbox GL：仅加载初始地图，而不使用获取的 GeoJSON 数据进行更新

Question

我正在开发一个使用 Mapbox GL 来显示地图的 React 应用程序。我需要从 URL 加载 GeoJSON 数据并相应地更新地图。但是，我面临一个问题，即仅加载初始地图，并且地图不会使用获取的 GeoJSON 数据进行更新。

我尝试使用 fetch 获取 GeoJSON 数据并使用接收到的数据更新状态，但它似乎没有反映在地图上。我已验证获取的数据是有效的 GeoJSON 并且包含必要的功能。

这是我的代码的简化版本：

import React, { useState, useEffect } from "react";
import Map from "react-map-gl";

const MapComponent = () => {
  const [viewState, setViewState] = useState({
    latitude: 45.4250485180001,
    longitude: -71.955837277,
    zoom: 14,
  });
  const [geojsonData, setGeojsonData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          "https://example.com/api/geojson-data"
        );
        const data = await response.json();
        setGeojsonData(data);
      } catch (error) {
        console.error("Failed to fetch GeoJSON data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <Map
      {...viewState}
      // Mapbox GL props
    >
      {/* Map layers and features */}
    </Map>
  );
};

export default MapComponent;

我已通过将获取的 GeoJSON 数据记录到控制台来验证 geojsonData 状态已更新。但是，地图不显示 GeoJSON 数据的功能。它仅显示以默认坐标为中心的初始地图。

什么可能导致此问题？我在实施中遗漏了什么吗？任何帮助或指导将不胜感激。

提前致谢！

在我的 React Mapbox GL 组件中，我尝试使用 fetch API 从特定 URL 获取 GeoJSON 数据。成功获取数据并使用获取的数据更新 geojsonData 状态后，我希望地图能够更新并渲染地图上的 GeoJSON 要素。但是，尽管 geojsonData 状态已使用获取的数据进行了更新，但地图并未相应更新。仅显示初始地图，没有任何 GeoJSON 功能。

我还尝试将 GeoJSON 数据直接硬编码到组件中，以消除数据检索的任何潜在问题。即使使用硬编码的 GeoJSON 数据，地图仍然没有更新以显示功能。

我验证了获取的 GeoJSON 数据和硬编码数据是有效的，并且包含在地图上渲染要素所需的坐标和属性。

我不确定为什么地图没有使用获取的或硬编码的 GeoJSON 数据进行更新。我怀疑我在地图上渲染数据或更新地图状态的方式可能存在问题。

Answer 1

在react-map-gl的GitHub页面上，有人解释说

<Source>

是一个PureComponent。第一次渲染后，除非 props 发生浅层变化，否则它不会更新，即 oldValue !== newValue。当您改变 JSON 数据时，它仍然是同一个对象，因此 React 不会检测到更改。

我在尝试传递保存在 React 状态中的 geoJSON 对象时遇到了完全相同的问题。解决该问题的解决方案是强制重新渲染

<Source>

组件：

import React, { useState } from 'react';
import Map, { Source } from 'react-map-gl';

const MyMap = () => {
  const [geojson, setGeojson] = useState(initialGeojson);
  const [key, setKey] = useState(0);

  // Function to update GeoJSON
  const updateGeojson = (newGeojson) => {
    setGeojson(newGeojson);
    setKey(key + 1); // Increment key to force re-render
  };

  return (
    <Map {...viewport}>
      <Source id="my-data" type="geojson" data={geojson} key={key}>
        {/* Add your layers here */}
      </Source>
    </Map>
  );
};

或者您也可以使用像

uuid

这样的包为每次重新渲染生成随机密钥。