在编辑未知长度的对象数组时，如何避免 ReactJS 中的多个单独 API 调用？

Question

我对 react/javascript 还很陌生，并且有一个处理出勤的 API，我查询了一个端点，该端点返回了正在参加的整个课程：

  async componentDidMount() {
    let registerid = this.props.match.params.registerid;
    await axios
      .get(`/api/registers/${registerid}`, {
        withCredentials: true,
      })
      .then((res) => {
        const { sessionDates, participants, lessonType, id } = res.data;
        this.setState({
          participants,
          sessionDates,
          lessonType,
          id,
        });
      });
  }

Participants 返回一个数组，因为可以有任意数量的人参加课程。参与者对象看起来像：

{
    'id': 'someId',
    'name': 'Joe Bloggs',
    'attended': false
}

当您点击注册表上的复选框时，它当前会运行一个函数，该函数会针对参与者进行自己的单独 API 调用：

handleAttendance(id, attended, e) {
    await axios.put(
      `/api/attend/`,
      {
        ParticipantID: id,
        attendedSession: attended
      },
      {
        withCredentials: true,
      }
    );
  }

我知道这是不好的做法，设计更好的应用程序不会单独进行这些查询。那么，如何为单个 API 请求批量处理参与者并保持它们的状态？