将对象转换为对象数组后，我需要更改子组件的 props 参数吗？

Question

我的 App 组件中有一个对象，子组件将其作为参数。

现在，我想将此对象扩展为对象数组。我的 props 应该如何传递到子组件中？

我尝试解构子组件中的道具并控制台记录错误，因为我收到“未定义”错误并且我的 map 和 reduce 函数不再工作。

从这里-> 索引.js

import React from "react";
import ReactDOM from "react-dom";
import Course from "./components/Course";

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
      },
      {
        name: "Redux",
        exercises: 11,
        id: 4
      }
    ]
  };

  return (
    <div>
      <ul>
        <Course course={course} />
        {}
      </ul>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));

到这个Index.js

const App = () => {
  const courses = [
    {
      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: 'Redux',
          exercises: 11,
          id: 4
        }
      ]
    }, 
    {
      name: 'Node.js',
      id: 2,
      parts: [
        {
          name: 'Routing',
          exercises: 3,
          id: 1
        },
        {
          name: 'Middlewares',
          exercises: 7,
          id: 2
        }
      ]
    }
  ]

  return (
    <div>
      // ...
    </div>

课程.js

import React from "react";
import Header from "./Header";

const Course = ({ course }) => {
  let totalExercises = course.parts.reduce(
    (sum, part) => sum + part.exercises,
    0
  );

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

export default Course;

我现在如何传递这个新数组以便我的子组件可以接受它们？

Answer 1

有两种方法可以做到这一点。

1. 您不更改子组件。在消耗组件的更高级别的树上使用数组方法执行所有代码。

喜欢这个 index.js

import React from "react";
import ReactDOM from "react-dom";
import Course from "./components/Course";

const App = () => {
  const courses = [{
    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
      },
      {
        name: "Redux",
        exercises: 11,
        id: 4
      }
    ]
  },{
  }];

  return (
    <div>
      { 
        courses.map(course => (
          <ul>
            <Course course={course} />
          </ul>
        ))
      }
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));

1. 在第二种方法中你需要更改 course.js

   它将接受一系列课程。使用那里的地图来迭代数组 对象。