Estoy tratando de obtener la temperatura actual de openweathermaps usando axios .
Puedo poner mi url en el navegador y funciona bien. Pero cuando trato de hacer una llamada axios con la URL correcta, no llama al evento.
Aquí está la sección de código relevante:
function Overview() { const [temperature, setTemperature] = useState('') const API_KEY = '{apikey}' const getTemperature = useCallback(async () => { const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude.toFixed(2)}&lon=${longitude.toFixed( 2, )}&appid=${API_KEY}` console.log('my provided url is set to:', url) const response = await axios.get(url) if (response.data) { setTemperature(response.data.main.temp) } }, [latitude, longitude]) useEffect(() => { getTemperature().catch(console.error) }, [getTemperature]) return <>{temperature ? temperature : 'no data'}</> }¡Cualquier ayuda sobre dónde me estoy equivocando sería genial ya que simplemente no puedo ver mi error!
Su URL que funciona en el navegador muestra que su clave API es correcta. Ahora, asegúrese de que las variables en su URL estén configuradas correctamente desde el código, particularmente la clave API. puede consolarlos. Regístrelos para estar seguro. Pasado eso, el código mínimo a continuación sería suficiente.
import {useCallback, useEffect} from 'react'; import axios from 'axios'; function Overview() { // YOUR_INITIAL_STATE rather be undefined const [temperature, setTemperature] = useState(YOUR_INITIAL_STATE); const API_KEY = 'YOUR_API_KEY'; const getTemperature = useCallback(async () => { const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`; console.log("my provided url is set to:", url); const response = await axios.get(url); if(response.data){ setTemperature(response.data.main.temp); } // only call the functtion when these deps change }, [latitude, longitude]) useEffect(() => { // Check the error for further debbugging getTemperature() .catch(console.error); }, [getTemperature]) return ( <> {temperature ? temperature : "no data"} </> ); }Parece que su función de flecha se llama a sí misma recursivamente:
const setTemperature = async () => { const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`); setTemperature(response.data.main.temp); };Su código no muestra dónde se llama esto. Probablemente tiene que ser algo como:
const setTemperature = async () => { const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`); return response.data.main.temp; };Tal vez solo necesita ser un cambio de una letra:
const getTemperature = async () => { const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`); setTemperature(response.data.main.temp); };Crédito a @devklick