React Leaflet中onEachFeature内highlightFeature无法调用API数据求助

核心问题分析 #

你遇到的情况本质是异步数据加载时机与组件初始化作用域的冲突：

• API数据是异步获取的，当GeoJSON组件初始化并绑定onEachFeature时，API数据可能还未返回，导致highlightFeature捕获的是初始空值；
• 本地JSON是同步可用的，初始化时就能拿到完整数据，因此功能正常。

具体修复步骤 #

1. 确保数据加载完成后再渲染GeoJSON #

在渲染GeoJSON组件前添加条件判断，避免在数据未就绪时初始化组件：

{apiData.length > 0 && (
  <GeoJSON
    data={geoJsonData}
    style={style}
    onEachFeature={onEachFeature}
  />
)}

2. 用useCallback包裹highlightFeature，绑定数据依赖 #

通过useCallback让函数在API数据更新时重新生成，确保能捕获到最新的state值：

import { useCallback } from 'react';

// ...

const highlightFeature = useCallback((e) => {
  const layer = e.target;
  // 匹配API数据与GeoJSON要素
  const featureData = apiData.find(
    item => item.adm2_code === layer.feature.properties.ADM2_CODE
  );
  console.log(featureData); // 现在能正常获取API数据了
  
  // 你的高亮逻辑示例
  layer.setStyle({
    weight: 3,
    color: '#666',
    dashArray: '',
    fillOpacity: 0.7
  });
}, [apiData]); // 将apiData作为依赖项

3. 校验数据匹配字段的一致性 #

确认API返回数据的字段与GeoJSON要素的属性字段完全匹配，比如你代码中用到的adm2_code和ADM2_CODE（注意大小写差异），字段不匹配会直接导致找不到对应数据。

额外提示 #

如果onEachFeature函数中调用了highlightFeature，也要确保onEachFeature能获取到最新的highlightFeature，可以把onEachFeature也用useCallback包裹，依赖项包含highlightFeature：

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

内容的提问来源于stack exchange，提问作者Rana Faraz