Javascript 如何制作一个函数方法来过滤和映射特定数据，以便从db中的对象进行渲染

在我的React应用程序中，我需要获取一些数据，从这些数据中我得到了一些称为事件的东西

与此类似

[
  {
    "id": "36",
    "ownerId": "",
    "ownerType": "",
    "title": "",
    "body": null,
    "type": "APPOINTMENT_SLOT",
    "typeId": null,
    "startTime": "2020-10-20T09:00:00.000Z",
    "endTime": "2020-10-30T15:00:00.000Z",
    "status": "CREATED",
    "actors": null,
    "eventTemplateId": "8",
    "timezone": null,
    "activeInfo": {
      "active": true,
      "startsIn": 1359,
      "endsIn": 13400,
      "__typename": "EventActiveInfo"
    },
    "__typename": "Event"
  },
  {
    "id": "99",
    "ownerId": "",
    "ownerType": "PARTICIPANT",
    "title": "",
    "body": null,
    "type": "APPOINTMENT_SITE",
    "typeId": "123",
    "startTime": "2020-10-22T08:00:00.000Z",
    "endTime": "2020-10-22T09:00:00.000Z",
    "status": "BOOKED",
    "actors": null,
    "eventTemplateId": "4",
    "timezone": "Europe/Stockholm",
    "activeInfo": {
      "active": false,
      "startsIn": -1461,
      "endsIn": 1520,
      "__typename": "EventActiveInfo"
    },
    "__typename": "Event"
  },
]

从上面开始，我需要首先从ownerId中筛选以下部分中的特定数据

• 所有者
• 开始时间
• 结束时间
• 所有者类型
• 类型

我最初做的是创建一个过滤器方法

events.filter(
      event =>
        event.ownerId === participant.studyId &&
        event.ownerType === 'PARTICIPANT' &&
        event.type === 'APPOINTMENT_SLOT' &&
        event.startTime,
    );

我需要实现的是，我已经从新的过滤部分获取了即将到来的约会时段的最新数据，现在是结束时间。 从这里开始，我必须呈现一个按钮，其中包含一个文本加上事件的ID，当事件完成并获取下一个事件的ID时，该ID会发生变化

例如：

事件1从20 Okt到28 Okt，按钮应显示为

appointments {APPOINTMENT_SLOT ID}

约会槽ID是即将到来的事件/实际事件的ID

事件2将相同，但当事件1完成时，将显示事件2的ID，依此类推

我的问题是要使这部分正确，因为我是一个新的反应，不确定最好的方式做它，我尝试了一个useEffect作为例子从另一个代码

useEffect(() => {
    if (Array.isArray(events)) {
      const _appointmentSlots = events
        .filter(
          event =>
            event.ownerId === participant.studyId &&
            event.ownerType === 'PARTICIPANT' &&
            event.type === 'APPOINTMENT_SLOT',
        )
        .map(event => ({
          id: event.id,
          title: event.title,
          start: formatDate(event.startTime),
          end: formatDate(event.endTime),
        }));
      console.log('App_slots', _appointmentSlots);
      setAppointmentSlots(_appointmentSlots);
    }
  }, [events]);

---

如果您想得到有用的答案，请尝试删除此问题中所有不相关的信息。现在这是一堵文字墙，但实际问题乍一看似乎很简单。是的，当然，但你认为什么可以作为无关信息删除，只是为了理解并设法在编辑ITA时提出正确的问题据我所知，这个问题主要是关于找到下一个插槽或其他什么？因此，我非常确定您可以删除前半部分，只需从过滤/减少的数据开始。顺便说一句：只要你在处理数据，就不要格式化你的日期。你只想做最后一步，把它们显示给用户。重读这篇文章，听起来你想从他们中得到下一个即将到来的事件？所以只要找到最接近开始时间的那一个就行了？