如何循環遍歷 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(', ')}