如何在 React 中的对象数组中映射单个道具的值数组？

Question

我之前使用 map() 循环遍历对象中单个 prop 的值。

const Content = (p)=>{
  console.log(p)
  const {parts} =p
  
  return (    
    <div>
      {parts.map((item)=> 
        <Part key={item.id} part={item.name} exercise={item.exercises}/>  
      )}
      
    </div>    
  )
}

现在对象扩展为对象数组，我将如何循环遍历我的值？

const course = [
    {
      name:'Half Stack application development',
      id:1,
      parts: [
        {
          name:'Fundamentals of React',
          exercises: 10,
          id: 1
        },
        {
          name:'Using props to pass data',
          exercises:7,
          id: 2
        },
        {
          name:'State of a component',
          exercises:14,
          id: 3
        }
    ]
  },
  {
    name: 'Node.js',
    id: 2,
    parts: [
      {
        name: 'Routing',
        exercises: 3,
        id: 1
      },
      {
        name: 'Middlewares',
        exercises: 7,
        id: 2
      }
    ]
  }
]

我是否应该在地图中使用地图，如果是，那么我应该如何实现它？

Answer 1

有很多方法，一种是：

只需在 return 语句之前创建一个 JSX 元素数组。直接渲染该数组。 这是一个带有p 标签的简单示例。您可以使用自己的组件：

import "./styles.css";

export default function App() {
  const course = [
    {
      name:'Half Stack application development',
      id:1,
      parts: [
        {
          name:'Fundamentals of React',
          exercises: 10,
          id: 1
        },
        {
          name:'Using props to pass data',
          exercises:7,
          id: 2
        },
        {
          name:'State of a component',
          exercises:14,
          id: 3
        }
    ]
  },
  {
    name: 'Node.js',
    id: 2,
    parts: [
      {
        name: 'Routing',
        exercises: 3,
        id: 1
      },
      {
        name: 'Middlewares',
        exercises: 7,
        id: 2
      }
    ]
  }
];

let comp = [];
course.forEach((p) => {
  comp = [comp, ...(p.parts).map((item)=> 
  <p key={item.id}>{item.name}</p>
)];
});
return (    
  <div>
    {comp}
    
  </div>    
)
}

Sandbox

Answer 2

你可以嵌套循环。

{course.map((item)=> 
        {
           items.parts.map((p)=><Part key={p.id} part={p.name} exercise= 
           {p.exercises}/> )
}  
      )}

Answer 3

一种简单的方法是将 flatMap 与 map 结合使用：

<div>
{
    course.flatMap(el1 => el1.parts.map(el2 =>
        <Part key={el2.id} part={el2.name} exercise={el2.exercises} />
    )
}
</div>