首页 > 解决方案 > 从外部 api 获取时如何在 Reactjs 中找到平均值?

问题描述

从外部获取数据时如何在 Reactjs 中计算平均值?

从 - https://www.hatchways.io/api/assessment/students获取数据

{api.map(student => (
    <div className="card m-3" style={{ width: "18rem" }}>
      <div className="card-body">
        <img
          src={student.pic}
          alt="Student Detail"
          className="float-left rounded mx-auto d-block"
        />
        <div className="row">
          <div className="col text-left">
            <h5 className="card-title card-text">
              {student.firstName} {student.lastName}
            </h5>
            <p className="card-text"> Email: {student.email}</p>
            <p className="card-text">Company: {student.company}</p>
            <p className="card-text">Skill: {student.skills}</p>

我想计算<p>标签内的平均值。注意:以下是续代码。

<p className="card-text">Average: {student.grades}</p>
          </div>
        </div>
      </div>
    </div>
  ))}

标签: javascriptreactjs

解决方案


您刚刚公开了 api,这个逻辑不属于 UI,但没关系。

{student.grades.reduce((a, b) => a + parseInt(b), 0) / student.grades.length}

推荐阅读