如何遍历对象内的嵌套数组？

Question

所以这是带有 3 个对象的 JSON 文件

export const Projects = [

  {

    id: 1,

    name: 'Site 1',

    tech: [

      'HTML',

      'CSS',

      'SASS',

      'React'

    ],

    description: 'Lorem1',

    image: '/Image4.jpg'

  },

  {

    id: 1,

    name: 'Site 2',

    tech: [

      'HTML',

      'CSS',

      'SASS',

      'React'

    ],

    description: 'Lorem2',

    image: '/Image4.jpg'

  },

  {

    id: 1,

    name: 'Site 3',

    tech: [

      'HTML',

      'CSS',

      'SASS',

      'React'

    ],

    description: 'Lorem3',

    image: '/Image4.jpg'

  }

];

我正在尝试遍历“技术”数组并自行返回每个项目。当我循环遍历它们时，现在我只能得到完整的数组，并且只能将它们全部放入一个 div 中。这就是我目前的做法，它与其他部分一起工作得很好，但是，我如何接收带有单个对象的“技术”部分，而不仅仅是一个数组？

const Portfolio = () => {

   const portfolioItem = Projects.map((project, i) => {

     return <Item

     key={i}

     image={Projects[i].image}

     description={Projects[i].description}

     name={Projects[i].name}

     tech={Projects[i].tech}  

     />

   })

Answer 1

假设techprop 的渲染以简单的方式实现，如下所示：const Item = ({tech}) => <div>{tech}</div>然后你可以将字符串数组映射到 React 元素数组：<Item&nbsp; key={i}&nbsp; image={Projects[i].image}&nbsp; description={Projects[i].description}&nbsp; name={Projects[i].name}&nbsp; tech={Projects[i].tech.map((t) => <span>{t}</span>)}&nbsp;&nbsp;/>或者，您可以使用显式分隔符将数组转换为单个字符串：&nbsp; &nbsp; &nbsp;tech={Projects[i].tech.join(', ')}&nbsp;&nbsp;