如何循环遍历 object 中的嵌套数组？

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'

  }
];

我正在尝试遍历“技术” arrays 并自行返回每个项目。 当我遍历它们时，现在我只能得到完整的数组，我只能将它们全部放入一个 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

您可以使用Array.flatMap()来迭代项目，使用内部Array.map()来迭代技术。

注意： project.id应该是唯一的，并与tech一起用作项目的键。

const Portfolio = () => {
  const portfolioItem = Projects.flatMap(project =>
    project.tech.map(tech => (
     <Item
       key={`${project.id}-${tech}`}
       image={project.image}
       description={project.description}
       name={project.name}
       tech={tech}  
       />
    )

Answer 2

假设tech prop 的渲染以简单的方式实现，如下所示：

const Item = ({tech}) => <div>{tech}</div>

然后你可以将 map 字符串数组转换成 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(', ')}