API返回的GeoJSON无法在react-leaflet中渲染如何解决？

安全阿岳

2026-10-5

问题排查与解决方案

1. 最常见原因：GeoJSON数据格式不符合要求

Leaflet的<GeoJSON />组件要求传入的data属性是完整的标准GeoJSON对象，而不是单独的要素数组。
如果你的接口返回的直接是要素数组（也就是res.data是[{type: "Feature", ...}, ...]结构），直接传给data会无法解析，需要手动包装成FeatureCollection结构：
修改handleFeatureAPI里的setFeatures逻辑：

.then((res) => setFeatures({
  type: "FeatureCollection",
  features: res.data
}))

如果接口本身返回的已经是带type和features字段的完整GeoJSON，跳过这一步。

2. 组件挂载后data更新不触发重绘的问题

你当前的写法是用features && <GeoJSON />控制渲染，但因为初始features是空数组（属于真值），所以组件在页面加载时就直接挂载了，后续data更新时，React Leaflet的<GeoJSON />组件默认不会主动重绘已有图层，所以你看不到新的数据。
两种可选解决方法：

方案1：修改初始状态为null，保证首次渲染GeoJSON时已经拿到了完整数据

// 把初始值从空数组改为null
const [features, setFeatures] = useState(null);

方案2：给<GeoJSON />组件加唯一的key属性，强制data变更时销毁旧组件、重新挂载新组件

{features && (
  <GeoJSON 
    key={JSON.stringify(features)} // 也可以用接口返回的更新时间戳、数据版本号等唯一值
    style={polystyle} 
    data={features} 
    onEachFeature={onEachFeature} 
  />
)}