Recientemente entré en React y mientras practicaba tuve este problema. Quiero tomar la información de la API y luego verla en la consola pero devuelve indefinido. Creo que cometí un error con axios pero no puedo verlo.
import axios from "axios"; import { useState } from "react"; import "./App.css"; function App() { const [place, setPlace] = useState("new york"); const [placeInfo, setPlaceInfo] = useState({}); const handleFetch = () => { const { data } = axios.get( `https://api.weatherapi.com/v1/forecast.json?key=931f75d818c34b51aca143737222202&q=${place}&days=1&aqi=no&alerts=no` ); console.log(data); }; return ( <div className="App"> <input type="text" value={place} onChange={(e) => { setPlace(e.target.value); }} ></input> <button onClick={handleFetch}>Search</button> </div> ); } export default App;Debería estar usando una función async y awaiting el resultado, así:
const handleFetch = async () => { const { data } = await axios.get( `https://api.weatherapi.com/v1/forecast.json?key=931f75d818c34b51aca143737222202&q=${place}&days=1&aqi=no&alerts=no` ); console.log(data); }; De lo contrario, obtienes una Promise como resultado, y dado que una Promise no tiene un campo data , obtienes undefined .