Javascript 如何使用for循环在React中渲染地图上的标记？

我正在试验React，我想在地图上渲染一些标记（我正在使用GoogleMapsAPI）。 现在，如果我硬编码标记（在示例中，5个标记，每个标记具有不同的坐标、名称和描述，如下面的位置数组中所示），那么一切都很好。 但是，如果我想在数组中循环并渲染它们，而根本不需要硬编码，该怎么办？我在render（）之前定义了renderMarkers函数。 任何帮助都将不胜感激。谢谢

/* Main component state */
state = {
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {},
    mapReady: true,
    desc: '',
    animation: null,
    locations: 
  [
   {
    "locationName": "name1",
    "position": '{"lat": "lat1", "lng": "lng1"}',
    "desc": "desc1"
  },
  {
    "locationName": "name2",
    "position": '{"lat": "lat2", "lng": "lng2"}',
    "desc": "desc2"
  },
  {
    "locationName": "name3",
    "position": '{"lat": "lat3", "lng": "lng3"}',
    "desc": "desc3"
  },
  {
    "locationName": "name4",
    "position": '{"lat": "lat4", "lng": "lng4"}',
    "desc": "desc4."
  },
  {
    "locationName": "name5",
    "position": '{"lat": "lat5, "lng": "lng5"}',
    "desc": "desc5."
  }
 ]
};

/* Function to render the markers, each with their relevant info taken from the state.locations array, on the map */
renderMarkers = () => {
for (let i = 0; i < this.state.locations.length; i++) {
  return <Marker
      onClick = { this.onMarkerClick }
      title = { this.state.locations[i].locName }
      position = { JSON.parse(this.state.locations[i].position) }
      desc = { this.state.locations[i].desc }
      animation = { this.state.animation[i] }
      name = { this.state.locations[i].locName } />
   }
 }

/*主要部件状态*/
状态={
ShowingInfo窗口：false，
活动标记：{}，
所选地点：{}，
马普雷迪：没错，
描述：''，
动画：空，
位置：
[
{
“locationName”：“name1”，
“位置”：“{”lat:“lat1”，“lng:“lng1”}”，
“描述”：“描述1”
},
{
“locationName”：“name2”，
“位置”：“{”lat:“lat2”，“lng:“lng2”}”，
“描述”：“描述2”
},
{
“locationName”：“name3”，
“位置”：“{”lat:“lat3”，“lng:“lng3”}”，
“描述”：“描述3”
},
{
“locationName”：“name4”，
“位置”：“{”lat:“lat4”，“lng:“lng4”}”，
“描述”：“描述4。”
},
{
“locationName”：“name5”，
“位置”：“{”lat:“lat5”，lng:“lng5”}”，
“描述”：“描述5。”
}
]
};
/*函数来渲染标记，每个标记的相关信息取自地图上的state.locations数组*/
渲染标记=（）=>{
for（设i=0；i

使用

map

函数创建标记数组

renderMarkers

函数应放在

render

函数之外。否则，每次组件状态更改时都会重新创建

renderMarkers

，因为每次状态更改（性能命中）时都会调用

render

renderMarkers（）{
返回此.state.locations.map（（位置，i）=>{
返回
})
}
render（）{
返回{this.renderMarkers（）}
}

使用map（）函数在render（）内部的数组上进行映射，当位置数组更新时，此结构将使其重新渲染。感谢您的回复@A.Larsson。由于我对此非常陌生，可以在render（）内部声明吗函数？表示最好不要。如果我在类中声明，然后在返回中使用{}调用它会怎么样？您好@jordan，谢谢您的回答。我尝试了按照您的方法进行操作，这很有意义，但是我得到了一个与

animation={this.state.animation[I]}相关的“TypeError:Cannot read property'0'of null”的问题

。如果你想帮我解决这个问题，我保存了整个组件代码。非常感谢！这是因为动画是

null

。我看到你对所有标记使用相同的动画。因此你可以按如下方式传递：

动画={this.props.google.maps.animation.DROP}

，它应该可以工作。另外，这个问题与渲染一组标记有关，因此如果我的答案对您有帮助，您可以接受。谢谢。很高兴我帮助了您！

renderMarkers() {
  return this.state.locations.map((location, i) => {
    return <Marker
      key={ i }
      onClick = { this.onMarkerClick }
      title = { location.locName }
      position = { JSON.parse(location.position) }
      desc = { location.desc }
      animation = { this.state.animation[i] }
      name = { location.locName } />
  })
}

render() {
  return <div>{ this.renderMarkers() }</div>
}