javascript - 来自 JSON API 数据的 React 中的总和字段值

Question

我用 Axios 从数据库中检索了这个数据数组，我想根据某些条件返回一个字段的总和

我已经使用 map() 从后端获取数据:

//getData.js

return (
  <ul>
    {attendance.map(({ _id, name, male }) => {

      return (
        <div key={_id}>
          <br />
          <hr />
          <li>{name}</li>
          {/* the condition is to render only male that are  >= 2 */}
          <li>{male >= 2 ? male : 0}</li>
        </div>
      )
    })}
  </ul>
)

//输出

Joshua Jaccob
2

Fabio Rio
2

Lancelot Abe
2

Bello
0

Becca Andrew
0

我想总结符合条件的男性总数，也只渲染那些符合条件的

Answer 1

你可以把所有符合条件的出席者压入一个列表，列表的长度就是总人数。

最后，只渲染列表。

// get all attendances with male >= 2
const list = attendance.filter(({ male }) => {
  return male >= 2;
});

return (
  <div>
    <h3>Total attendances with male >= 2: {list.length}</h3>
    <ul>
//pass in name and _id
      {list.map(({ name,_id }) => {
        return (
          <div key={_id}>
            <br />
            <hr />
            <li>{name}</li>
          </div>
        )
      })}
    </ul>
  </div>
)