TypeError: no se pueden leer las propiedades de undefined (leyendo 'ciudad')
Estoy tratando de recorrer las claves de dirección y los valores, pero fallé, luego intenté acceder a un valor a la vez y obtuve ese error. Soy nuevo en React y JS. Cuando trato de registrar ese valor, obtengo la respuesta sin problemas, pero tan pronto como quiero imprimirlo en la pantalla, aparece el error. Intenté la forma posible que pude pensar y encontrar en línea, pero lamentablemente nada funcionó.
//this is a component that is supposed to show details of each hero const HeroPage = () => { const { id } = useParams(); const [hero, setHero] = useState({}); useEffect(() => { const fetchHero = async () => { const res = await fetch( `https://jsonplaceholder.typicode.com/users/${id}`); const data = await res.json(); setHero(data); }; fetchHero(); }, [id]); const address = hero.address; return ( <div className="card-container-page box"> <div className="box-middle"> <h1>{hero.name}</h1> <h3>{hero.email}</h3> <h3>{hero.phone}</h3> <h3>{address.city}</h3> // I have also tried the following code {Object.keys(hero).map((keyName, i) => ( <li className="card-container" key={i}> <span className="input-label"> key: {i} Name: {hero[keyName]} </span> </li> ))} </div> </div> ); }; export default HeroPage; //JSON response I get [ { "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "Sincere@april.biz", "address": { "street": "Kulas Light", "suite": "Apt. 556", "city": "Gwenborough", "zipcode": "92998-3874", "geo": { "lat": "-37.3159", "lng": "81.1496" } }, "phone": "1-770-736-8031 x56442", "website": "hildegard.org", "company": { "name": "Romaguera-Crona", "catchPhrase": "Multi-layered client-server neural-net", "bs": "harness real-time e-markets" } }] //https://jsonplaceholder.typicode.com/usersParece que su respuesta JSON es una matriz de objetos.
Este código establecerá esa respuesta JSON a la variable de estado Hero.
const fetchHero = async () => { const res = await fetch( `https://jsonplaceholder.typicode.com/users/${id}` ); const data = await res.json(); setHero(data);El tipo de héroe ahora es una matriz. Así que esta línea será indefinida:
const address = hero.address;En su lugar, intente acceder al primer elemento de la matriz, así:
const address = hero[0].address;Si tuviéramos que refactorizar esto en un componente de trabajo, escribiría algo como esto.
const HeroPage = (props) => { const [hero, setHero] = useState(); useEffect(() => { const fetchHero = async () => { const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`); const data = await res.json(); setHero(data); }; fetchHero(); }, [id]); if (hero === undefined) { return null; } return ( <div key={hero.id} className="card-container-page box"> <div className="box-middle"> <h1>{hero.name}</h1> <h3>{hero.email}</h3> <h3>{hero.phone}</h3> <h3>{hero.address.city}</h3> </div> </div> ); }; export default HeroPage;Editar: volver a trabajar el ejemplo con la suposición de que el héroe es un objeto.
Observe la verificación para ver si el héroe === indefinido. Esto es necesario porque cuando se inicializa el estado, su valor no está definido, antes de que fetchHero obtenga una respuesta y la guarde en la variable de estado.