Объекты недопустимы в качестве дочерних элементов React при использовании функции карты для написания компонентов React

Question

Я создаю собственное приложение, которое имеет функцию карты для создания маркеров на карте для множества различных мест. Для этого я использую API для получения координат и поэтому должен использовать функцию asyn c следующим образом:

<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}). Я предполагаю, что ошибка в том, что я неправильно реализовал функцию карты asyn c. Что это должно быть?

Answer 1

Координатная опора, передаваемая компоненту Market, должна быть объектом или массивом (представляющим широту / долготу, x / y и т. Д. c), однако то, что передается, является обещанием.

Часть "constordins = await fetchCoords (place)" не должна выполняться непосредственно с вашим методом рендеринга, но вместо этого где-нибудь еще, как componentDidMount, затем сохранять в состояние или делать вызов asyn c в компоненте более высокого порядка и передавать результат как реквизит. Это гарантирует, что функция fetchCoords не будет вызываться без необходимости при каждом повторном рендеринге.