0

我有一个 React 应用程序，其中react-leaflet@2.7.0+react-leaflet-draw@0.19.0地图显示FeatureGroup包含多边形的多个组件。应用程序的右端是功能组名称的可单击列表。通过单击名称可以选择性地“激活”组，因此如果功能组处于活动状态，则会呈现其中的 EditControl。一次只能激活一个组。

我的问题

当我从一个组切换到另一个组，然后单击 中的编辑按钮时EditControl，onEditStart/Stop先前活动组的事件仍然会触发，以及新组的事件。我在组之间切换的次数越多，触发的事件就越多。

更新：

问题似乎EditControl是永远不会卸载，即使在父状态更改时它也不会被渲染。如果我向其添加随机key道具，则问题已解决，但随后会出现其他问题。

我还没有一个最小的代码示例可以分享，但是为了让您了解这里的实现是一个模式：

<App>
   <Map>
     <MapContent id="foo">
      <FeatureGroup>
        <EditControl />
      </FeatureGroup>
     </MapContent>
     <MapContent id="bar">
      <FeatureGroup>
        <EditControl />
      </FeatureGroup>
     </MapContent>
   </Map>
   <GroupSelector />
</App>

除了App（根组件）、MapContent（非常基本的包装器：检查组是否处于活动状态）和GroupSelector（可点击列表）之外，所有其他组件都来自react-leaflet和react-leaflet-draw。

流 点击时，GroupSelector更新状态App以设置一个activeGroupID（即“foo”），并且只有当它匹配MapContent时才会呈现它EditControlidactiveGroupID

我希望这个描述是有道理的。任何帮助将不胜感激！

4

0 回答 0