Estoy recreando una aplicación meteorológica simple con reaccionar y tengo muchos problemas para crear una llamada API muy simple. Probé una gran cantidad de métodos aquí, youtube, etc. y recibo errores continuamente. El código actual que tengo es:
import Axios from 'axios'; import { Home } from '../components/Home' import React, {useState, useEffect} from 'react' var weatherApiRootUrl = 'https://api.openweathermap.org'; var weatherApiKey = 'd91f911bcf2c0f925fb6535547a5ddc9'; //function to generate weather URL. fetches lat/lon and creates new url function GetWeatherUrl(loc){ const [weatherLink, setWeatherLink] = useState(""); const getCoordinates = () => { Axios.get(`${weatherApiRootUrl}/geo/1.0/direct?q=${loc}&limit=5&appid=${weatherApiKey}`).then( (response)=>{ console.log(response); setWeatherLink(`${weatherApiRootUrl}/data/2.5/onecall?lat=${response.data.lat}&lon=${response.data.lon}&units=imperial&exclude=minutely,hourly&appid=${weatherApiKey}`); } ); }; return( <div> {weatherLink} </div> ); } export{ GetWeatherUrl }El propósito de este archivo es simplemente usar la entrada del usuario (un nombre de ciudad diseñado por variable loc) para obtener las coordenadas de latitud/longitud de la ciudad ingresada, ya que esos datos son necesarios para el segundo enlace que obtiene información meteorológica. La entrada del usuario se maneja desde otro componente y funciona bien.
Todo lo que pretendo que haga este código es obtener datos de latitud y longitud usando loc y usar esos números para generar el nuevo enlace que obtiene datos meteorológicos. Los datos meteorológicos se realizarán con una llamada api diferente en otro archivo. El método de trabajo de este archivo actual debería ser utilizable para el archivo futuro destinado a buscar el clima, por lo que esto es como dos pájaros de un tiro.
Necesito el weatherLink generado para poder exportarlo para hacer esto, así que realmente preferiría una solución que lo permita, por favor. Originalmente, solo iba a exportar los datos de lat/lon sin procesar y usarlos para la llamada en el nuevo archivo como lo hice con loc aquí, pero decidí devolver un enlace completo como una cadena que tal vez sería más fácil. ¡Realmente agradecería la ayuda de alguien en esto, me ha estado frustrando por mucho más tiempo del que debería!
No es realmente necesario, pero aquí está la versión del sitio que no reacciona si ayuda: https://giovannimalcolm.github.io/weather-dashboard/
Esto se puede resolver fácilmente sin necesidad de usar React, ya que no es un componente y no tiene ninguna lógica de renderizado en sí mismo:
import Axios from 'axios'; const weatherApiRootUrl = 'https://api.openweathermap.org'; const weatherApiKey = 'd91f911bcf2c0f925fb6535547a5ddc9'; export async function GetWeatherUrl(loc) { const response = await Axios.get(`${weatherApiRootUrl}/geo/1.0/direct?q=${loc}&limit=5&appid=${weatherApiKey}`); return `${weatherApiRootUrl}/data/2.5/onecall?lat=${response.data.lat}&lon=${response.data.lon}&units=imperial&exclude=minutely,hourly&appid=${weatherApiKey}`; } Luego, en los lugares donde necesita usar la URL del clima, debe recordar que GetWeatherUrl devuelve una promesa , por lo que debe esperarla (o manejarla como cualquier otra promesa):
const myFn = async () => { const weatherUrl = await GetWeatherUrl(loc); const weatherUrlData = await Axios.get(weatherUrl); }; myFn();