Sé que esta pregunta se ha vuelto a hacer, pero no estoy seguro de lo que estoy haciendo mal porque ninguna solución me funciona. mi código:
import React, { useEffect, useState } from "react"; import "./App.css"; function App() { const [items, setItems] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); fetch("https://jsonplaceholder.typicode.com/users") .then((json) => { setItems(json.items); }) .catch((err) => { console.log(err); }) .finally(() => { setLoading(false); }); }, []); if (loading) { return <p>Data is loading...</p>; } return ( <div className="App"> <ul> {items.map((item) => ( <li key={item.id}> name: {item.name} | email: {item.email} </li> ))} </ul> </div> ); } export default App;Traté de escribirlo como esto también, para verificar si la matriz existe y no obtengo un error, pero no obtengo nada como resultado:
{items?.map((item) => ( <li key={item.id}> name: {item.name} | email: {item.email} </li> ))}Cambie useState a esto: const [loading, setLoading] = useState(true); En la primera carga, la función de la aplicación regresa antes del código indefinido useEffect.
Si aún no funciona, agregue un signo de interrogación antes de acceder a prop. Como esto:
<ul> {items?.map((item) => ( <li key={item?.id}> name: {item?.name} | email: {item?.email} </li> ))} </ul>Agregar un signo de interrogación lo hace opcional.
primero debe convertir la respuesta a json y luego establecerla en estado.
fetch("https://jsonplaceholder.typicode.com/users") .then((res) => res.json()).then((data) => { setItems(data); }) Desde la documentación , fetch no devuelve directamente el cuerpo de la respuesta JSON , sino que devuelve una promesa que se resuelve con un objeto de Response . El objeto Response , a su vez, no contiene directamente el cuerpo de la respuesta JSON real, sino que es una representación de la respuesta HTTP completa. Entonces, para extraer el contenido del cuerpo JSON del objeto Response, use el método json() , que devuelve una segunda promesa que se resuelve con el resultado de analizar el texto del cuerpo de la respuesta como JSON .
Hola, mirando la documentación de jsonplaceholders, primero debe transformar la respuesta con json () al buscar de esta manera
useEffect(() => { setLoading(true); fetch("https://jsonplaceholder.typicode.com/users") .then((response) => { return response.json() // return response.json() first }) .then((json) => { setItems(json) // then set the json into the items }) .catch((err) => { console.log(err); }) .finally(() => { setLoading(false); }); }, []);Sin convertirlo a json primero, configura el objeto de respuesta en lugar de la matriz json