import React, {useState, useEffect} from "react"; import './App.css'; function App() { const [ data, setData ] = useState([]); useEffect( ()=> { loadData(); //getData(); }, []); const loadData = async () => { await fetch("https://randomuser.me/api") .then(response => response.json()) .then(receiveddata => setData(receiveddata)); } console.log(data); return ( <div className="App"> <p> Fetch/ Async/ Await</p> {data.map(user => ( <div key={user.id}>{user.name}, {user.email}</div> ))} </div> ); } export default App;Recibo este error en la consola,
TypeError no detectado: data.map no es una función
Está recibiendo el error porque data no son una matriz. La respuesta que está recibiendo es un objeto que tiene dos propiedades, results e info . Dado que su estado es una matriz, establezca el estado en datos receiveddata.results en su lugar.
Firsteval, su console.log(data) no devolverá nada, porque el estado no se actualizará cuando su código ejecute console.log() ; así que no espere obtener información de depuración con eso.
Luego, su respuesta es un object , no una array . Puede hacerlo de esta manera: setData(receiveddata.results) y luego puede mapear () sus datos.
En su render, también debe verificar si el mapa no está vacío como este:
{data && data.map(user => ( <div key={user.id}>{user.name}, {user.email}</div> ))}Debe verificar la estructura de compilación de datos de su API. Su matriz está dentro de la propiedad "results" . Y "title" es un objeto también. Puede encontrar un ejemplo funcional de su código aquí CodeSandbox . Revisa la consola entenderás mejor la estructura de tu respuesta