Api 无法在 onEachFeature React leaflet 函数内工作

我陷入了无法解决的问题。我正在用反应传单制作等值线。问题是我的API数据在highlightFeature函数中不起作用，该函数将其分配给onEachFeature。当我控制台API数据时，我在highlightFeature函数之外得到了很好的结果。但它在我需要它工作的highlightFeature函数中不起作用。谁能帮我 ？请检查下面的代码。提前致谢。

注意：如果我使用本地 json 数据，我的意思是手动创建硬编码，它工作正常。只有我的api数据在这个功能突出显示功能下不起作用。代码和盒子链接在这里https://codesandbox.io/s/boring-pine-w0y9vu?file=/src/Map.js https://codesandbox.io/s/boring-pine-w0y9vu?file=/src/Map.js

看起来 onEachFeature 在初始加载时采用函数 Copy 并单独执行该函数。因此更新的 Post 值不会导致 onEachFeature 函数。我不知道具体如何解决这个问题。但解决方法是您可以 addLoader 直到获取数据，然后渲染地图组件，这将解决您的问题。

import React, { useState } from "react";
import "leaflet/dist/leaflet.css";
import { MapContainer, TileLayer, GeoJSON } from "react-leaflet";
import features from "./country";
import "./Map.css";
import axios from "axios";
import { LocalData } from "./LocalData";
const baseURL = "https://jsonplaceholder.typicode.com/posts/1";

const Map = () => {
  const [onselect, setOnselect] = useState({});
  const [post, setPost] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  React.useEffect(() => {
    setLoading(true);
    axios.get(baseURL).then((response) => {
      setPost(response.data);
      // Added Loader..
      setLoading(false);
    });
  }, []);
  const highlightFeature = (e) => {
    console.log({ post }, "in"); 
    console.log({ LocalData }, "in");
    var layer = e.target;
    const {
      County,
      Total,
      Male,
      Female,
      Intersex,
      Desnity
    } = e.target.feature.properties;
    setOnselect({
      county: County,
      total: Total,
      male: Male,
      female: Female,
      intersex: Intersex,
      density: Desnity
    });
    layer.setStyle({
      weight: 1,
      color: "black",
      fillOpacity: 1
    });
  };

  const resetHighlight = (e) => {
    setOnselect({});
    e.target.setStyle(style(e.target.feature));
  };

  const onEachFeature = (feature, layer) => {
    layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight
    });
  };

  const mapPolygonColorToDensity = (density) => {
    return density > 3023
      ? "#a50f15"
      : density > 676
      ? "#de2d26"
      : density > 428
      ? "#fb6a4a"
      : density > 236
      ? "#fc9272"
      : density > 23
      ? "#fcbba1"
      : "#fee5d9";
  };
  const style = (feature) => {
    return {
      fillColor: mapPolygonColorToDensity(feature.properties.Desnity),
      weight: 1,
      opacity: 1,
      color: "white",
      dashArray: "2",
      fillOpacity: 0.5
    };
  };
  const mapStyle = {
    height: "55vh",
    width: "85%",
    margin: "0 auto"
  };
  const feature = features.map((feature) => {
    return feature;
  });
  return (
    <div className="container">
      <div className="header">
        <h2 className="heading">
          Kenya Population as Per 2019 National Census Exercise
        </h2>
        <p className="text-muted">
          A choropleth map displaying Kenya population density as per the
          national census conducted <br />
          in 2019 Each County, details displayed by the map include, total
          population and number of each gender.
        </p>
      </div>
      <div className="">
        <div className="">
          {!onselect.county && (
            <div className="census-info-hover">
              <strong>Kenya population density</strong>
              <p>Hover on each county for more details</p>
            </div>
          )}
          {onselect.county && (
            <ul className="census-info">
              <li>
                <strong>{onselect.county}</strong>
              </li>
              <br />
              <li>Total Population:{onselect.total}</li>
              <li>Men:{onselect.male}</li>
              <li>Women:{onselect.female}</li>
              <li>Intersex:{onselect.intersex}</li>
              <li>
                Population density:{onselect.density} people <br /> per square
                km
              </li>
            </ul>
          )}
          <MapContainer
            zoom={6}
            scrollWheelZoom={true}
            style={mapStyle}
            center={[1.286389, 38.817223]}
          >
            <TileLayer
              attribution="Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL."
              url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png"
            />
            // Load Geojson after getting data..
            {feature && !loading && (
              <GeoJSON
                data={feature}
                style={style}
                onEachFeature={onEachFeature}
              />
            )}
          </MapContainer>
        </div>
      </div>
    </div>
  );
};
export default Map;