呈现React组件时如何映射异步函数

Question

我正在构建一个具有本机功能的react应用，该应用具有地图功能，可以在地图上为一系列不同的地方创建标记。为此，我使用API​​来获取坐标，因此需要使用异步函数：

<MapView style={styles.mapStyle}>
  {this.state.isLoading ? null : 
    this.state.places.map(async (place) => {
      const coords = await fetchCoords(place)

      return (
        <MapView.Marker
          coordinate = {coords}
        />
      )
    })
  }
</MapView>

但是此代码给出错误：Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72})。我猜该错误是因为我实现了异步映射功能错误。应该是什么？

Answer 1

使用Promise.all()处理带有async/await之类的列表的map

await Promise.all(this.state.places.map(async ...));