¿Puede alguien decirme por qué estoy recibiendo este error? Intenté arreglarlo todo el día, pero no pude arreglarlo. Así que finalmente tuve que venir a stackoverflow
Este es mi código: App.js
import "./App.css"; function App() { const [inputvalue, setInputvalue] = useState(" "); const [apidata, setApidata] = useState([]); const [finalpoint, setFinalpoint] = useState(""); useEffect(() => { fetch( `https://weatherapi-com.p.rapidapi.com/forecast.json?q=+${inputvalue}&days=3`, { method: "GET", headers: { "x-rapidapi-host": "weatherapi-com.p.rapidapi.com", "x-rapidapi-key": "7f89bf16ebmsh9dff0f23f963d34p190691jsn264543e18108", }, } ) .then((response) => { return response.json(); }) .then((data) => { setApidata(data); }) .catch((err) => { console.error(err); }); }, [finalpoint]); const onchangeinput = (e) => { setInputvalue(e.target.value); }; const onsubmithandler = (e) => { e.preventDefault(); setFinalpoint(inputvalue); }; return ( <div className="App"> <div className="main"> <h2>Welcome To weather App </h2> </div> <form onSubmit={onsubmithandler}> <input type="text" value={inputvalue} onChange={onchangeinput} /> <button type="submit">Search</button> </form> {apidata.map((data, i) => { return <h1>{data.current.feelslike_c}</h1>; })} </div> //Map ); } export default App;Este es el error que recibo: ingrese la descripción de la imagen aquí
Compruebe si está recibiendo indefinido aquí:
.then((data) => { setApidata(data); })y anulando el estado con indefinido.
Lo que veo es que la API inicialmente devuelve un objeto de error. Además, cuando se devuelven los datos adecuados, vuelven como un objeto. Al configurar su estado, deberá configurar los datos dentro de una matriz (si desea utilizar el método de mapa). También tendrá que manejar el error haciendo algo como esto:
import { useState, useEffect } from "react"; function App() { const [inputvalue, setInputvalue] = useState(" "); const [apidata, setApidata] = useState([]); const [finalpoint, setFinalpoint] = useState(""); useEffect(() => { fetch( `https://weatherapi-com.p.rapidapi.com/forecast.json?q=+${inputvalue}&days=3`, { method: "GET", headers: { "x-rapidapi-host": "weatherapi-com.p.rapidapi.com", "x-rapidapi-key": "7f89bf16ebmsh9dff0f23f963d34p190691jsn264543e18108" } } ) .then((response) => { return response.json(); }) .then((data) => { console.log(data) if (data.error) return null; setApidata([data]); }) .catch((err) => { console.error(err); }); }, [finalpoint]); const onchangeinput = (e) => { setInputvalue(e.target.value); }; const onsubmithandler = (e) => { e.preventDefault(); setFinalpoint(inputvalue); }; console.log("test", apidata); return ( <div className="App"> <div className="main"> <h2>Welcome To weather App </h2> </div> <form onSubmit={onsubmithandler}> <input type="text" value={inputvalue} onChange={onchangeinput} /> <button type="submit">Search</button> </form> {apidata.length ? apidata.map((data, i) => { return <h1 key={i}>{data.current.feelslike_c}</h1>; }) : null} </div> //Map ); }ver ejemplo de trabajo: https://codesandbox.io/s/eager-wind-06ywo?file=/src/App.js