无法读取嵌套数组与 MAP 反应

Question

i'm in trouble with my nested array. i have an object:

{ name: 'house', 
  url: 'www.mockhouse.com', 
  thumb: myImage, 
  describe: 'another project', 
  tech: ['react', 'fetch', 'SASS', 'HTML'] },

when i try to map tech array (that is a nested array) like:

   <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>

it dosen't work and i have an error: Project.jsx:67 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

i dont know why it dosen't work any idea?

thanks:)

Answer 1

Maybe in some objects of the array the tech property does not exist. Please make sure this is a defined array and not an optional property in the object. Just in case, if it is an optional property or it is undefined for some objects in the array then you can use ? on you loop like this:

   <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>

? will allow you to evaluate the code only if the statement before ? evalues to a defined value.