estoy aprendiendo con un proyento en ReactJS. el comando npm start ejecuta todo pero no renderiza nada, la pagina muestra solo el titulo de la pestaña (como si solo funciona el html y no reacciona el js o jsx), lo raro es que me sucedió de un día para otrointroducir la descripción del enlace aquí. Adjunto el link de mi repo y dejo mi index. desde ya muchas gracias.
1 respuesta
Despues de revisar el repositorio de tu proyecto pude identificar el siguiente error:
Tienes un componente de nombre ItemList
en cual intentar recorrer la propiedad autoList
para mostrar los elementos de dicha lista
function ItemList(props) {
return (
<div>
{ props.autoList.map((listaAutos) => {
return <Card
key={listaAutos.id}
titulo={listaAutos.titulo}
imagen={listaAutos.imagen}
marca={listaAutos.marca}
precio={listaAutos.precio}
stock={listaAutos.stock}/>;
})}
</div>
)
}
El detalle esta es que esa propiedad no se la estas pasando al componente y por ende aparece como undefined
mostrando el siguiente error:
ItemList.jsx:8 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
Dicho error lo puedes corregir de la siguiente manera:
- Empleando el hook
useEffect
en el cual vas a llamar a la funciongetAutos
en la que se encarga de traer lo datos. - Asignar los datos del paso anterior a la variable
autoList
utilizando el hookuseState
- Pasar la propiedad
autoList
al componenteItemList
function App() {
let estiloFondo = {backgroundColor: "#b398ff"};
const [autoList, setAutoList] = React.useState([])
// Aca llamar a la funcion cuando el componente se inicializa
useEffect(() => {
getAutos().then(data => {
setAutoList(data) // Aca asignas los datos a la variable autoList
}).catch(error => {
setAutoList([]) // Aca igualas a un array vacio en caso de error
}).catch(error => {
})
}, [autoList])
return (
<div style={estiloFondo} className="App">
<CollapsibleExample/>
<ItemList autoList={autoList}/> {/* Aca pasas la propiedad al componente*/}
<Footer/>
</div>
);
}
-
Muchas gracias! despues de una limpieza de codigo dunciono perfecto. saludos Commented el 1 nov. 2022 a las 2:36