使用 Map 函數編寫 React 組件時，對象不能作為 React Child 有效

Question

我正在構建一個 react native 應用程序，它具有地圖功能，可以在地圖上為不同地方的數組創建標記。 為此，我使用 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 = await fetchCoords(place)”部分不應該直接在你的渲染方法中發生，而是在其他地方，比如 componentDidMount 然后保存到狀態，或者在更高階的組件中進行異步調用並將結果作為道具傳遞. 這將確保 fetchCoords 函數不會在每次重新渲染時被不必要地調用。