GeoJSON图层更新导致LayersControl中出现多个条目

Question

我的代码从Rest API获取geojson，因此最初的数据项是一个空数组。

<LayersControl position="topright">
...
<Overlay name="Areas">
    <GeoJSON color="purple" key={this.state.key} data={this.state.data} onEachFeature={this.onEachFeature} />
</Overlay>
...
</LayersControl>

API承诺完成后，我在数据和密钥上都设置了State（）以强制进行更新。

fetch(
      "https://...."
    )
      .then(response => response.json())
      .then(data => {
        this.setState({ data: data['features'], key: new Date().getTime() });
      });

一切正常。但是，我在LayersControl中获得了第二个条目。

我尝试通过对叠加层的引用在该图层上执行remove（）-无效 还尝试通过对GeoJSON元素的引用对leafletElement进行remove（）-也不起作用

GeoJSON的第二层对键属性使用hash（data）方法-也不起作用。

是否有更好的方法来处理动态加载GeoJSON或管理图层？