React-Leaflet：如何清除功能组并使用状态添加新组件？答案

【问题标题】：React-Leaflet: How to clear a Feature Group and add new components using state?React-Leaflet：如何清除功能组并使用状态添加新组件？
【发布时间】：2021-09-26 21:09:41
【问题描述】：

我对 react-leaflet 和 react 还比较陌生，在我的地图上绘制新组件时遇到了麻烦。我已经被困了一个星期了，所以希望有人能提供帮助。我正在尝试从地图上的功能组中清除组件（层？），然后通过更改父组件的状态来呈现新的组件。

在我的最小示例程序 located at this sandbox 我有几个组件：

Map父组件，包含地图状态、标记、查询数据、地图边界和选择框值

  // state for initial map loading
  let [map, setMap] = useState(null);
  // states in Map component
  let [data, setData] = useState();
  let [bounds, setBounds] = useState(null);
  let [featureNum, setFeatureNum] = useState(1);
  // some random markers simulating user placed markers on map
  let [markers, setMarkers] = useState([
    [27.147144835991796, 31.530761718750004],
    [28.844673680771795, 33.662109375],
    [26.86328062676624, 35.804443359375]
  ]);

Select which is a dropdown menu that sets the state of featureNum when the select box value changes.

Line 是一个 Geojson 功能，它接收来自data 状态的数据并设置markers 的状态。存在于特征组中。

Markers 使用markers 的状态创建标记特征。存在于特征组中。

地图初始渲染后，当featureNum 的状态发生变化时，geojson 数据通过我的Map 组件中的fetch API 异步获取。新接收数据的边界在解析时计算，data 和bounds 的状态使用状态设置器设置。使用 useRef 挂钩和 .clearLayers()

清除功能组

但是，当设置data 时，地图上不会出现新的Line 组件。地图飞到组件应该出现的新边界。我尝试将要素组的 z-index 设置为 9999，但这也不起作用。

在从Select 组件中选择特征时， 如何清除特征组的地图并在地图上显示新的Line 组件？ 谢谢！

【问题讨论】：

标签： reactjs leaflet react-leaflet react-leaflet-v3

【解决方案1】：

这行代码似乎完成了它的工作，它清除了属于featureGroup的所有层。在第一次渲染时，它不会进入您的if (map) 语句，因为map 是null，但如果您在setData 调用下登录，则当您更改下拉列表时，它会重新渲染第二次

console.log("setData", featureGroupRef.current.getLayers());

你会看到层是一个空的[]。

所以你应该首先摆脱那条线

featureGroupRef.current.clearLayers();

然后使用这个component 能够同时更改您的GeoJSON 的数据，因为data 属性是不可变的，因此更改值不会触发重新渲染并保持您之前的样式。您最终将在 Line 组件上使用相同的代码，但您将使用 GeoJsonWithUpdates 将其重命名为您认为更合适的任何内容，而不是 react-leaflet 的 GeoJson 组件。

Demo

【讨论】：

修复了它！谢谢！