Estoy tratando de aprender sobre la obtención de API, y seguí algunas otras respuestas aquí, pero sigo recibiendo un error extraño en este script:
const fetcher = async () => { const url = 'https://banana1.free.beeceptor.com/cars' const response = await fetch(url) //once we fetch we get a resposne const json_data = await response.json() return json_data } const Publish = () => { const [loading, setLoading] = useState(true) const [choices, setChoices] = useState([]) useEffect(()=>{ const choiceGetter = async () => { await fetcher().then(json_data=>{ setChoices(json_data); setLoading(false); console.log(json_data) }) }; choiceGetter(); },[]) return( <> <h1> {loading&&<>loading...</>} {!loading&&choices&& choices.map( (choice) => { const {option,make} = choice; return( <div key={car1}> <h1>{option}</h1> <h3>{make}</h3> </div>) } ) } </h1> </> ) } export default ApiTestel error:
Unhandled Runtime Error TypeError: choices.map is not a function Source .next/static/chunks/pages/index.js (56:24) @ ApiTest 54 | {loading&&<>loading...</>} 55 | {!loading&&choices&& > 56 | choices.map( (choice) => { | ^ 57 | const {option,make} = choice; 58 | return( <div key={car1}> 59 | <h1>{option}</h1>He intentado incluso imitar lo siguiente:
ReactJs useState .map() no es una función
pero no funciona...
La respuesta no es una matriz, es un objeto.
// 20211006212847 // https://banana1.free.beeceptor.com/cars { "car1": { "option": "lease", "make": "toyota", "body": "round", "model": "camery", "trim": "sle", "year": 2020, "color": "metalic gray" }, "car2": { "option": "finance", "make": "nissan", "body": "square", "model": "sentra", "trim": "xle", "year": 2021, "color": "army green" } } Entonces, el estado de las choices no es una matriz. Estás mutando el estado invariante.
Conviértalo en una matriz al renderizar:
Object.values(choices).map(choice => ....O convertirlo al almacenar en el estado:
useEffect(()=>{ fetcher().then(json_data => { setChoices(Object.values(json_data)); setLoading(false); }); },[]); Si desea utilizar las claves del objeto (es decir, "coche", "coche2", etc.), utilice Object.entries para devolver una matriz de pares clave-valor.
Object.entries(choices).map(([key, choice]) => { const {option, make} = choice; return ( <div key={key}> <h1>{option}</h1> <h3>{make}</h3> </div> ) })