如何在React Leaflet中通过onEachCountry刷新GeoJSON choropleth图层

你遇到的视图不更新问题有两个核心诱因：

• react-leaflet的GeoJSON组件默认仅在data属性发生变更时，才会重新执行onEachFeature回调。你切换selectedStat时，countries数据源没有变化，因此不会触发图层重渲染；你写的useEffect中直接调用onEachCountry()没有传入country和layer参数，属于无效调用。
• 即便你手动修改了图层的options属性，Leaflet也不会自动刷新图层样式，必须主动调用图层的样式更新方法才会生效。

方案1：最简实现（推荐你的场景使用） #

给GeoJSON组件绑定key属性，值设为selectedStat，React会在key变化时自动销毁旧的GeoJSON实例，重新渲染全新的组件，自动重新执行onEachFeature逻辑，不需要修改其他现有代码：

1. 删掉你当前没用的useEffect(() => { onEachCountry() }, [selectedStat])代码段
2. 修改GeoJSON组件声明：

<GeoJSON key={selectedStat} data={countries} onEachFeature={onEachCountry}/>

这个方案适合国家数据量不大的场景，实现成本极低，不会有明显性能问题。

方案2：手动更新图层（适合大数据量场景） #

如果你的国家GeoJSON数据量很大，全量重渲染有性能损耗，可以用ref拿到GeoJSON实例，主动遍历更新所有图层样式：

1. 引入useRef定义GeoJSON实例引用

import React, { useState, useEffect, useRef } from "react";
// 其他导入不变
const ChoroMap = ({ countries, coffees, onChangeLegend }) => {
  const [selectedStat, setSelectedStat] = useState("Producers");
  const geoJsonRef = useRef(null); // 新增ref
  // 其他现有代码不变

2. 给GeoJSON绑定ref

<GeoJSON ref={geoJsonRef} data={countries} onEachFeature={onEachCountry}/>

3. 新增useEffect监听变化，主动更新图层：

useEffect(() => {
  if (!geoJsonRef.current) return;
  // 遍历所有国家图层
  geoJsonRef.current.eachLayer((layer) => {
    // 调用现有逻辑更新图层配置
    onEachCountry(layer.feature, layer);
    // 主动刷新图层样式
    layer.setStyle(layer.options);
    // 刷新弹窗内容
    const popup = layer.getPopup();
    if (popup) {
      layer.closePopup();
      layer.bindPopup(popup.getContent());
    }
  });
}, [selectedStat, coffees, onEachCountry]);

4. 用useCallback包裹onEachCountry避免不必要的重渲染：

const onEachCountry = useCallback((country, layer) => {
  // 你的原有逻辑完全不变
}, [coffees, selectedStat]);

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