使用JavaScript Map和Reduce处理对象数组的React渲染问题

核心问题说明 #

你的代码核心问题是组件层级设计错误，没有按单个课程维度拆分渲染逻辑，同时Total组件的求和逻辑完全错误：

• 现有逻辑是先统一渲染所有课程标题，再统一渲染所有课程的章节，最后只渲染一个全局的总习题数，和你要的「每个课程单独展示标题+章节+自身习题总和」的结构不符
• Total组件中reduce求和用了乘法、初始值为0、同时没有正确遍历到二维数组里的exercises字段，最终才会输出NaN

修改后完整可运行代码 #

import React from 'react';

// 单个章节组件
const Part = (props) => {
  return (
    <p>{props.partName} {props.noOfEx}</p>
  )
}

// 单个课程的总习题统计组件
const Total = ({ parts }) => {
  // 直接遍历当前课程的parts数组求和
  const exTotal = parts.reduce((sum, part) => sum + part.exercises, 0);
  return (
    <p><b>Total of {exTotal} exercises</b></p>
  )
}

// 单个课程组件，接收单个课程对象作为参数
const SingleCourse = ({ course }) => {
  return (
    <div style={{ marginBottom: '20px' }}>
      <h2>{course.name}</h2>
      {course.parts.map(part => (
        <Part key={part.id} partName={part.name} noOfEx={part.exercises} />
      ))}
      <Total parts={course.parts} />
    </div>
  )
}

const Course = ({ course }) => {
  return (
    <>
      <h1>Web Development curriculum</h1>
      {/* 遍历每个课程，单独渲染SingleCourse组件 */}
      {course.map(item => (
        <SingleCourse key={item.id} course={item} />
      ))}
    </>
  )
}

const App = () => {
  const course = [
    {
      id: 1,
      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: 'Destructuring',
          exercises: 14,
          id: 4
        }
      ]
    },
    {
      name: 'Node JS',
      id: 2,
      parts: [
        {
          name: 'Routing',
          exercises: 3,
          id: 1
        },
        {
          name: 'middlewares',
          exercises: 7,
          id: 2
        }
      ]
    }
  ]

  return <Course course={course} />
}

export default App;

主要修改点 #

• 新增SingleCourse组件，负责单个课程的标题、章节、习题总和的渲染，从根源上解决内容和标题不匹配的问题
• 重构Total组件，接收当前课程的parts数组作为入参，reduce求和用加法、初始值设为0，正确累加所有章节的习题数
• 调整了标题文本拼写，和你预期输出的文案保持一致
• 移除了原来逻辑冗余的Header、Content组件，把对应逻辑合并到对应层级的组件中，避免结构混乱

内容的提问来源于stack exchange，提问作者Wanderi Mwangi