Estoy en problemas con mi matriz anidada. tengo un objeto:
{ name: 'house', url: 'www.mockhouse.com', thumb: myImage, describe: 'another project', tech: ['react', 'fetch', 'SASS', 'HTML'] },cuando trato de mapear una matriz tecnológica (que es una matriz anidada) como:
<GalleryWrapper> {props.projectArray.map((projects) => { return ( <ThumbWrapper key={uuidv4()}> <ThumbImg src={projects.thumb} alt="" /> <ThumbTitle> {projects.name}</ThumbTitle> <ThumbDescrib>{projects.describe}</ThumbDescrib> {projects.tech.map((techno) => { return <ThumbTech>{techno}</ThumbTech>; // here is the problem // })} </ThumbWrapper> ); })} </GalleryWrapper>no funciona y tengo un error: Project.jsx: 67 TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'mapa')
No sé por qué no funciona, ¿alguna idea?
Gracias :)
Tal vez en algunos objetos de la matriz, la propiedad tech no existe. Asegúrese de que se trata de una matriz definida y no de una propiedad opcional en el objeto. Por si acaso, si es una propiedad opcional o no está definida para algunos objetos en la matriz, entonces puede usar ? en tu bucle como este:
<GalleryWrapper> {props.projectArray.map((projects) => { return ( <ThumbWrapper key={uuidv4()}> <ThumbImg src={projects.thumb} alt="" /> <ThumbTitle> {projects.name}</ThumbTitle> <ThumbDescrib>{projects.describe}</ThumbDescrib> {projects.tech?.map((techno) => { return <ThumbTech>{techno}</ThumbTech>; // here is the problem // })} </ThumbWrapper> ); })} </GalleryWrapper> ? le permitirá evaluar el código solo si la declaración anterior ? se evalúa a un valor definido.