Estoy tratando de crear una WeatherApp usando React y OpenWeathermap API como proyecto para principiantes. Después de obtener los datos de la API, no puedo devolver ningún componente, ya que siempre devuelve un valor nulo de la declaración condicional.
import React, {useEffect, useState } from "react"; export default function App(){ const API_KEY = somekey; const [lat, setLat] = useState([]); const [long, setLong] = useState([]); const [data, setData] = useState([]); useEffect(() => { const fetchData = async () => { navigator.geolocation.getCurrentPosition(function (position) { console.log(position.coords.latitude); setLat([position.coords.latitude]); //sets latitude setLong([position.coords.longitude]); //sets longitude }); await fetch( `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${long}&exclude=hourly,minutely&units=metric&appid=${API_KEY}` ) .then((res) => res.json()) .then((result) => { setData([result]); console.log(data); }); }; fetchData(); }, [lat, long]); return ( <div className="App"> {(typeof data.main !== 'undefined') ? ( <h1>{data.name}</h1> //doesnt execute ) :null} </div> ); }El proyecto se basa en este ejemplo: https://www.freecodecamp.org/news/learn-react-by-building-a-weather-app/
dado que navigator.geolocation.getCurrentPosition es asíncrono, llama a fetch antes de llamar a setLat etc.
Nota: mi conocimiento de reactjs es limitado, por lo que quizás no pueda hacer lo siguiente en useEffect ; disculpas de antemano si ese es el caso
En fetchData , obtendría los datos de openweathermap en la devolución de llamada en navigator.geolocation.getCurrentPosition , así
const fetchData = () => { navigator.geolocation.getCurrentPosition(position => { setLat([position.coords.latitude]); //sets latitude setLong([position.coords.longitude]); //sets longitude fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${position.coords.latitude}&lon=${position.coords.longitude}&exclude=hourly,minutely&units=metric&appid=${API_KEY}`) .then(res => res.json()) .then(result => { setData([result]); }); }); }; Tenga en cuenta que no usa ningún async ya que no se usa await
Si desea utilizar la espera asíncrona, puede "prometer" navigator.geolocation.getCurrentPosition así
const getCurrentPosition = options => new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject, options));entonces puedes usarlo así
const fetchData = async () => { const position = await getCurrentPosition(); // the promisified function above setLat([position.coords.latitude]); //sets latitude setLong([position.coords.longitude]); //sets longitude const res = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${position.coords.latitude}&lon=${position.coords.longitude}&exclude=hourly,minutely&units=metric&appid=${API_KEY}`); const result = await res.json(); setData([result]); }; Tenga en cuenta también que, en ambos casos, el código usa position.coords.latitude y position.coords.longitude en la llamada a openweathermap en lugar de lat y long ; debido a mi falta de conocimiento sobre reactjs, no sé si setLat para ejemplo, cambia lat "sincrónicamente" o no (nuevamente, mi conocimiento de reactjs es muy limitado)