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

Question

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

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

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

  // 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 这是一个下拉菜单，用于在 select 框值更改时设置 featureNum 的状态。

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

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

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

清除功能组

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

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

Answer 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

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

React-Leaflet: How to clear a Feature Group and add new components using state?

reactjs

leaflet

react-leaflet

react-leaflet-v3