0

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 1

1

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:

  1. Empleando el hook useEffect en el cual vas a llamar a la funcion getAutos en la que se encarga de traer lo datos.
  2. Asignar los datos del paso anterior a la variable autoList utilizando el hook useState
  3. Pasar la propiedad autoList al componente ItemList
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>
  );
}
1
  • Muchas gracias! despues de una limpieza de codigo dunciono perfecto. saludos
    – Gianfranco
    Commented el 1 nov. 2022 a las 2:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.