react-leaflet LayersControl在列表中生成重复项

Question

我的版本： 反应：16.0.0 反应传单：1.6.6

我尝试将图层控制器添加到地图中。有两层，每层包含多个标记。这是我试图做的一个例子。

$array = array();

$array[""] = array();
$array[""]["id"] = "test";
$array[""]["reason"] = "test reason";

$array[""] = array();
$array[""]["id"] = "test";
$array[""]["reason"] = "test reason";

在此处运行代码：https://www.webpackbin.com/bins/-Kvmu5PPSjeS4lY-qe_E

问题出在渲染之后，列表中应该只有两层。目前，我看到每个图层中的每个项目都显示在列表中。我认为原因是因为我将标记推送到数组并返回它。但是，我不确定我可以做的解决方法是每层只显示一个列表。

Answer 1

事实证明，我需要在LayerGroup中包装我的标记数组，现在它可以工作了。

<LayersControl position='topleft'>
  <LayersControl.Overlay checked name="first layer">
    <LayerGroup>
      {this.renderFirst()}
    </LayerGroup>
</LayersControl.Overlay>
  <LayersControl.Overlay checked name="second layer">
    {this.renderSecond()}
  </LayersControl.Overlay>
</LayersControl>