当使用Map Function编写React Components时，对象作为React Child无效

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

传递给Market组件的坐标道具需要是一个对象或数组(表示纬度/经度、x/y等(，但传递的是承诺。

"const coords=wait fetchCoords(place("部分不应该直接与您的渲染方法一起发生，而是应该在componentDidMount等其他地方发生，然后保存到状态，或者在更高阶的组件中进行异步调用，并将结果作为道具传下来。这将确保fetchCoords函数不会在每次重新渲染时被不必要地调用。