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

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

  key={i}

  image={Projects[i].image}

  description={Projects[i].description}

  name={Projects[i].name}

  tech={Projects[i].tech.map((t) => <span>{t}</span>)}  

/>

或者，您可以使用显式分隔符将数组转换为单个字符串：

     tech={Projects[i].tech.join(', ')}