Получил данные в консоле, на экране ошибка - Objects are not valid as a React child

Question

В GraphQL лежит количество координат lat lan, я хочу получить через API адресс, выводися он в консоль, но на экран не могу, очень запарился...Через useState тоже не получилось...

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

Ошибка "Objects are not valid as a React child" означает что вы пытаетесь отрендерить объект, а не его значение.

Вы не можете использовать в return асинхронные функции получения данных. Сначала получите их, сохраните в state и тогда уже рендерите.

<p>
  {
    getAddress(edge.node.location.lat, edge.node.location.lon) // нельзя, getAddress - это промис-объект
  }
</p>

Answer 2

export default function DataFteching({ x, y }) {
  const [adrress, setAdrress] = useState(null)
  const [loading, setLoading] = useState(true)
  const region = /place/
  useEffect(() => {
    async function FtechData() {
      const token = '';
      await axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${x},${y}.json?access_token=${token}`)
        .then(res => {
          // console.log(res.data.features.find(place => place.id.match(region)).text)
          setAdrress(res.data)
        })
        .catch(err => console.log(err))
        .finally(() => setLoading(false));
    }
    FtechData();
  }, [])
  if (loading) return <div>Loading...</div>;
  return <p> city: {adrress.features.find(place => place.id.match(region)).text} </p>
}

БЛОГ НА HUSL

Получил данные в консоле, на экране ошибка - Objects are not valid as a React child

Ответы (2 шт):