我无法将标记显示在地图上（React-leaflet.js）

Question

我从TFL的API获得了所有自行车积分的“lat”和“lng”。我试图在React-leaflet地图上显示所有自行车点作为标记。

我已成功获取数据并将其过滤为正确的格式[51.505，-0.09]并将每个数据映射到标记

component <Marker  position={data.position} /> . 

问题是标记没有显示在地图上。

我已经硬编码了一些数据并且它可以工作，所以我不明白我对实时数据做错了什么。如果有人可以帮助我，我将非常感激？我整晚都被困在这里。

这是我在Jsfiddle的问题：

Problem on jsfiddle！

Answer 1

这里有一个拼写错误，您需要返回元素（有关详细信息，请参阅Lists and Keys文档）：

{this.state.bikeMarkers.map(data => {
    return <Marker position={data.position}></Marker>
    ^^^^^^
    missing
})}           

filterData函数在提供的示例中看起来是多余的，数据可以在第一个位置检索和过滤，如下所示：

axios.get(`https://api.tfl.gov.uk/bikepoint`).then(res => {
  let markers = res.data.map(location => {
    return { key: location.id, position: [location.lat, location.lon] };
  });

  this.setState({
    bikeMarkers: markers
  });
});

Updated jsFiddle