cómo resolver este error con 'No se pueden leer las propiedades de undefined (leyendo 'nombre')' y lo mismo con (leyendo 'ubicación'), no entiendo.
Swagger: https://test-front.framework.team/api-docs/#/%2Flocalizaciones/ubicaciones
códigos y caja: https://codesandbox.io/s/elem-1f5t5
Quiero que los bloques de elementos se muestren correctamente, con toda la información que obtengo de la API
import "./styles.css"; import { useEffect, useState } from "react"; const App = () => { const baseURL = "https://test-front.framework.team/"; const [items, setItems] = useState([]); const [authors, setAuthors] = useState([]); const [locations, setLocations] = useState([]); useEffect(() => { fetch("https://test-front.framework.team/paintings") .then((res) => res.json()) .then( (result) => { setIsLoaded(true); setItems(result); console.log("paintings"); } ); fetch("https://test-front.framework.team/authors") .then((res) => res.json()) .then( (result) => { setIsLoaded(true); setAuthors(result); console.log("authors"); } ); fetch("https://test-front.framework.team/locations") .then((res) => res.json()) .then( (result) => { setIsLoaded(true); setLocations(result); console.log("locations"); } ); }, []); const result = items.map((elem) => { return { author: authors.find((author) => author.id === elem.authorId).name, created: elem.created, id: elem.id, imgUrl: elem.imgUrl, location: locations.find((location) => location.id === elem.locationId) .location, name: elem.name }; }); return ( <div className="App"> {result.map((elem) => ( <div key={elem.id} className={"item"}> <img src={`${baseURL}${elem.imageUrl}`} /> <li className={"cardInfo"}> <ul>{elem.name}</ul> <ul> {elem.author}</ul> <ul>{elem.created}</ul> <ul>{elem.location}</ul> </li> </div> ))} </div> ); }; export default App;es porque representa la página antes de la solicitud y los elementos son una matriz vacía, puede establecer el resultado dentro de su useEffect de esta manera:
useEffect(() => { fetch("https://test-front.framework.team/paintings") .then((res) => res.json()) .then( (result) => { setIsLoaded(true); setItems(result); console.log("paintings"); } ); fetch("https://test-front.framework.team/authors") .then((res) => res.json()) .then( (result) => { setIsLoaded(true); setAuthors(result); console.log("authors"); } ); fetch("https://test-front.framework.team/locations") .then((res) => res.json()) .then( (result) => { setIsLoaded(true); setLocations(result); console.log("locations"); } ); const result = items.map((elem) => { return { author: authors.find((author) => author.id === elem.authorId).name, created: elem.created, id: elem.id, imgUrl: elem.imgUrl, location: locations.find((location) => location.id === elem.locationId) .location, name: elem.name }; }); }, []);o puede establecer un estado booleano cuando su solicitud se realiza de esta manera y luego usar jsx para mapear sus elementos:
import "./styles.css"; import { useEffect, useState } from "react"; const App = () => { const baseURL = "https://test-front.framework.team/"; const [items, setItems] = useState([]); const [authors, setAuthors] = useState([]); const [locations, setLocations] = useState([]); const [hasItemsArrived , SetHasItemsArrived] = usestate(false) useEffect(() => { fetch("https://test-front.framework.team/paintings") .then((res) => res.json()) .then( (result) => { setIsLoaded(true); setItems(result); setHasItemsArrived(true); console.log("paintings"); } ); fetch("https://test-front.framework.team/authors") .then((res) => res.json()) .then( (result) => { setIsLoaded(true); setAuthors(result); console.log("authors"); } ); fetch("https://test-front.framework.team/locations") .then((res) => res.json()) .then( (result) => { setIsLoaded(true); setLocations(result); console.log("locations"); } ); }, []); return ( <div className="App"> {hasItemsArrived && items.map((elem) => ( <div key={elem.id} className={"item"}> <img src={`${baseURL}${elem.imageUrl}`} /> <li className={"cardInfo"}> <ul>{elem.name}</ul> <ul> {elem.author}</ul> <ul>{elem.created}</ul> <ul>{elem.location}</ul> </li> </div> ))} </div> ); }; export default App;Hay un problema al obtener el valor del elemento de imagen de la matriz de elementos al resultado. Actualicé su sandbox de código y todos los atributos requeridos se muestran correctamente. Por favor verificar.