反应单页更新标记

Question

你好，我是一个小叶子新手，我正在用地图组件构建我的应用程序.地图上的标记应该在每次用户执行特定操作（过滤器）时更新.该组件工作得很好.然后我决定从原来的Leaflet中添加响应的弹出式插件.所以我调整了很多反应小叶子的正常组件.现在每次我执行我的新过滤器时，新的标记都会成功地添加到地图上，但是旧的标记不会被删除.

代码andbox演示

任何帮助如何解决这个问题？

Answer 1

如果你不绑定该组件（传单-响应-弹出），你可以这样解决（首选解决方案）。CodeSandbox没有ResponsivePopup。

<Marker key={i} position={bus}>
  <Popup>
    <span>Note<br />{i}</span>
  </Popup>
</Marker>

如果你必须使用该组件，那么你必须将标记存储在一个数组中，并且在添加新标记之前清除所有标记，就像这样。CodeSandbox与ResponsivePopup。问题是你在添加标记的同时，从未删除旧的标记。你必须传递所有的坐标，这样你就可以先删除旧的，然后再添加新的。