React-Leaflet如何清空Feature Group并通过状态新增组件

问题核心原因 #

你混用了原生Leaflet API操作和React声明式渲染逻辑：手动调用featureGroup.clearLayers()时，直接清空了FeatureGroup下所有已渲染的图层实例，但React的虚拟DOM仍标记这些图层组件为已挂载状态，后续data状态更新时，React不会重新渲染被你手动删除的Line组件，就会出现边界跳转正常但图层不显示的问题。

解决方案 #

方案1：完全用React状态控制图层渲染（推荐）

不要手动调用原生clearLayers()方法，所有图层的增删完全通过状态控制：

1. 当featureNum变化触发新请求时，先把data置为null、markers置为空数组，React会自动卸载Line、Markers组件，相当于完成FeatureGroup的清空操作
2. 待新的GeoJSON数据请求成功后，再更新data、bounds和对应的markers状态，React会自动把新的图层组件渲染到FeatureGroup中

方案2：强制重置FeatureGroup实例

如果必须使用原生clearLayers()方法，可通过key属性让React强制重建FeatureGroup：

1. 给Map组件新增一个状态控制FeatureGroup的key：

const [fgKey, setFgKey] = useState(0)

2. 在FeatureGroup组件上绑定key属性：<FeatureGroup key={fgKey} ref={yourRef}>...</FeatureGroup>
3. 调用clearLayers()清空图层后，更新key值触发重渲染：setFgKey(prev => prev + 1)，整个FeatureGroup会被React销毁重建，内部的Line组件会基于最新的data状态重新渲染。

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