如何计算API返回对象数组中嵌套的成绩平均值并在JSX中展示

实现方案 #

常见失效原因

你之前的计算方法不生效，大概率是API返回的grades数组元素为字符串类型的数字，直接累加会变成字符串拼接，无法得到正确的数值总和。

完整修改代码

// 抽成独立的平均成绩计算函数，易维护也可复用
const getAverageGrade = (grades) => {
  if (!grades?.length) return 0 // 边界处理：空数组避免除以0报错
  const sum = grades.reduce((acc, cur) => acc + Number(cur), 0)
  return (sum / grades.length).toFixed(1) // toFixed参数可调整保留的小数位数
}

// 渲染逻辑修改
data.map( ( element, index ) => {
    const averageGrade = getAverageGrade(element.grades)
    return (
        <div key={index} className="person-card" >
            <div><img src={element.pic} alt="pic" />
            </div>
            <div>
                <h2>
                    <strong>{element.firstName}    {element.lastName}</strong>
                </h2>
            </div>
            <div className="email">
                Email: {element.email}
            </div>
            <p> Company: {element.company}</p>
            <p>Skill: {element.skill}</p>
            <p>平均成绩：{averageGrade}</p> {/* 新增平均成绩展示位 */}
        </div>
    )
} )

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