Con suerte, el título de la pregunta no es demasiado vago o confuso, pero lo explicaré aquí:

Básicamente, estoy tratando de aprender más sobre las API durante mi viaje con React.JS. El proyecto es obtener información del pronóstico del tiempo en función de cualquier ubicación (lo estoy haciendo en función de los códigos postales de Canadá) que ingrese en el cuadro de búsqueda. Estoy usando Axios específicamente para este y me he encontrado con un pequeño problema.

Quiero que el programa tome la respuesta de un enlace API y luego tome datos específicos de esa respuesta para insertarlos en otro enlace API. Entonces finalmente obtendrá la respuesta del nuevo enlace. Con suerte, esto no es confuso también. Intenté cosas diferentes, y todavía no tuve suerte, pero pondré lo que probé recientemente a continuación.

Esto es lo que hice hasta ahora:

 import React, { useState } from 'react' import axios from 'axios' function App() { // UseStates to change the variables const [data, setData] = useState({}) const [postalcode, setPostalCode] = useState('') const [latitude, setLatitude] = useState(0) const [longitude, setLongitude] = useState(0) // API Links const geocodingURL = `http://api.openweathermap.org/geo/1.0/zip?zip=${postalcode},CA&limit=1&appid=7fe57d3d219cd9512845e116e4c353c5` const weatherURL = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=7fe57d3d219cd9512845e116e4c353c5` // Arrow Functions to retrieve the responses from the API Links const searchPostalCode = (event) => { if (event.key === 'Enter') { axios.get(geocodingURL).then((response) => { setData(response.data) console.log(response.data) }) axios.get(weatherURL).then((response) => { setLatitude(data.lat) setLongitude(data.lon) setData(response.data) console.log(response.data) }) setPostalCode("") } } return ( <div className="app"> <div className="search"> <input value={postalcode} onChange={event => setPostalCode(event.target.value) && setLatitude(data.lat) && setLongitude(data.lon)} onKeyPress={searchPostalCode} searchWeather placeholder='Enter Postal Code' type="text"/> </div> <!-- There is more code here, but I don't think it's necessary for this question since it's just header tags --> </div> ); } export default App;

La API meteorológica que estoy usando no tiene una ubicación directa -> API meteorológica. Tengo que usar dos, así que tengo que hacer Ubicación -> Longitud y latitud, y luego Longitud y latitud -> Clima.

Si lo que dije es confuso, por favor hágamelo saber. Puedo tratar de explicarlo más si es necesario.

Además, dado que soy un poco nuevo en todo esto de React.js y API, si hay algún consejo que me recomiendes, házmelo saber. Me encantaría saber cualquier información útil a lo largo de este viaje.

¡Gracias!