Javascript 如何在React中正确使用数组的map方法

我尝试使用map方法来显示零件名称和练习，而不是硬编码，我可以使用map方法，但不能使用道具传递

   {course.parts.map(note => (
    <p key={note.id}>
      {" "}
      {note.name} {note.exercises}
    </p>
  ))} 

我把它添加到了我的返回体中，它可以工作。我如何分解结构 这个

预期：React 10的基础知识使用道具传递组件14的数据7状态，但结果为空。

这里您将向组件传递课程道具，如

<Course key={note.id} course={note} />

或者你可以直接分解你的道具

const Course = ({course}) => { //direct destructuring
console.log(course);
  return (
  <p>
    {" "}
    {course.name} {course.exercises}
  </p>
  );
 };

---

你不需要这么多的组件来满足你的需求。你可以简单地做

常数课程={ 名称：“半堆栈应用程序开发”， 部分：[ { 名称：“React的基本原理”， 练习：10， id:1， }, { 名称：“使用道具传递数据”， 练习：7， id:2， }, { 名称：“组件的状态”， 练习：14， id:3， }, ], }; 常量应用==>{ 常量{name，parts}=课程； 回来 {parts.mapnote=>

{`${note.name}${note.exercises}}

} ; }; 注:

我已经删除了段落前的空格，但如果您需要，可以将该行改为

---

{${note.name}${note.exercises}

为什么？代码转储不是有用的答案。此控制台记录的数据正确吗？const Course=Course=>{console.logcourse；@cullanrocks-不会，不会，但是如果你不熟悉这类东西，那么在记录正确的数据时阅读它确实很容易-

const Course = (props) => { 
console.log(props.course);
  return (
  <p>
    {" "}
    {props.course.name} {props.course.exercises}
  </p>
  );
 };

const Course = ({course}) => { //direct destructuring
console.log(course);
  return (
  <p>
    {" "}
    {course.name} {course.exercises}
  </p>
  );
 };