Question

我正在尝试使用map方法显示零件名称和练习，而不是对其进行硬编码，我可以使用map方法，但不能使用它与道具一起传递

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

我将此添加到我的返回正文中，该作品如何分解这个吗？

 const App = () => {
 const course = {
 name: "Half Stack application development",
 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
   }
   ]
  };

const rows = () =>
course.parts.map(note => <Course key={note.id} course={note} />);

return (
 <div>
   <Header course={course.name} />

   {rows()}
 </div>
 );
 };

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

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

Answer 1

在这里，您将course道具传递给组件，例如

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

您需要使用course来访问子组件中的props.course道具

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>
  );
 };

Answer 2

您不需要太多的组件即可满足您的需求。你可以简单地做

const course = {
  name: 'Half Stack application development',
  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,
    },
  ],
};

const App = () => {
  const { name, parts } = course;

  return (
    <div>
      <Header course={name} />
      {parts.map(note => (
        <p key={note.id}>{`${note.name} ${note.exercises}`}</p>
      ))}
    </div>
  );
};

注意：

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

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

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

2 个答案: