在React Native中通过.map（）生成时，为什么我的地图标记没有渲染？

Question

通过Wifi在Android外部设备上将React Native与react-native-maps一起使用。

我制作了一个名为MapMarker的组件，该组件接受道具的title和coordinates 。 在我的<MapView></MapView> ，可以这样渲染它：

<MapMarker
  coordinates={{
      longitude: -4.516095,
      latitude: 55.679897
  }}
  title="James"
/>

但是我想动态渲染标记，所以我将状态设置为：

    mapMarkers: [
        {
            latLng: {
                latitude: 55.679897,
                longitude: -4.516095,
            },
            title: "James"
        }
    ]

当我尝试使用.map()映射此状态时，它似乎没有碰到组件。 我知道这是因为我在<Marker>组件中有一个console.warn() 。 这就是我使用.map()函数的方式：

 {this.state.mapMarkers.map((marker) => {
    <MapMarker
       coordinates={{
           longitude: marker.latLng.longitude,
           latitude: marker.latLng.latitude
       }}
       title={marker.title}
   />
 })}

使用第二种方法，不会触发console.warn() （放置在componentDidMount() ）。 我已将this.state.mapMarkers[0].longitude和纬度转储到主屏幕上，并且它们都是正确的/可见的。

从Vue的背景来看，我不需要100％地使用.map()进行渲染组件的不同处理。

Answer 1

确保您返回正在创建的React组件。 最简单的方法是利用箭头功能并使用括号而不是功能括号。

 {this.state.mapMarkers.map((marker) => (
    <MapMarker
       coordinates={{
           longitude: marker.latLng.longitude,
           latitude: marker.latLng.latitude
       }}
       title={marker.title}
   />
 ))}