Объекты недействительны как дочерние объекты React, данные получены в консоли, но не отображаются

Question

Я получил dataAddress в консоли с актуальными координатами x, y. Но у меня проблема. Объекты недействительны как дочерние объекты React (найдено: [object Promise]). Я действительно не понимаю, что не так.

const BlogPage = () => {
  const data = useStaticQuery(graphql`
  query{
    allContentfulBlogPost{
      edges{
        node{
          location{lat, lon}
          }
        }
      }
    }
  `)
  const token = 'token';
  let getAddress = async (x, y) => {
    const api_url = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${x},${y}.json?access_token=${token}`)
    const dataAddress = await api_url.json()
    console.log(dataAddress);
  }
  return (
    <Layout>

      {
        data.allContentfulBlogPost.edges.map((edge) => {
          return (
            <p>
              {
                getAddress(edge.node.location.lat, edge.node.location.lon)
              }
            </p>

          )
        })
      }
    </Layout>
  )
}

Answer 1

В вашем коде есть ошибки. Во-первых, вы должны поместить вызов API в ловушку useEffect, чтобы она не вызывалась при каждой визуализации. Во-вторых, функция getAddress() возвращает объект Promise, помеченный как async. Таким образом, вы не можете передать это как дочерний элемент React, по крайней мере, не добавив ключевое слово await. Также у вас должна быть функция getAddress(), возвращающая интересующие данные (возможно, значение dataAddress), чтобы вы могли использовать это значение вне функции (прямо сейчас функция ничего не возвращает). Или, что еще лучше, установите это значение в свое состояние React.

Вы можете попробовать:

...
const [address, setAddress] = React.useState({});

React.useEffect(() => {
  getAddress(edge.node.location.lat, edge.node.location.lon);
}, [])
...

А в функции getAddress() установите возвращаемое значение как часть вашего состояния:

let getAddress = async (x, y) => {
    const api_url = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${x},${y}.json?access_token=${token}`)
    const dataAddress = await api_url.json()
    console.log(dataAddress);
    setAddress(dataAddress);
}

И в вашем JSX просто используйте значение состояния

...
<Layout>
    {data.allContentfulBlogPost.edges.map((edge) => {
        return (
            <p>{address}</p>
        )
    })}
</Layout>
...

Конечно, это предполагает, что значение address не является объектом. Если это так, вам придется использовать только примитивные свойства этого объекта в вашем JSX. Например, если это объект со свойствами: x и y, ваш JSX может выглядеть как

...
<p>({address.x}, {address.y})</p>
...