React遍历MongoDB对象数组筛选用户参与活动代码不生效问题

代码过滤失效的核心原因：participants是存储多个参与者信息的对象数组，而非单个参与者对象，直接访问events.participants.email只会得到undefined，永远无法匹配当前用户邮箱，因此过滤结果为空。
另外代码里的回调参数命名存在歧义：外层遍历的源数组名为events，filter、map回调里的单条数据参数也命名为events，很容易引发逻辑混淆。

前端本地过滤修复 #

用数组的some()方法，判断当前活动的参与者数组里是否存在邮箱和当前用户一致的条目即可，修正后的代码：

{events
  .filter(event => event.participants.some(participant => participant.email === currentProfile.email))
  .map(event => (
    <Grid key={event._id} item xs={12} sm={6} md={4}>
      <Event event={event} setCurrentId2={setCurrentId2} />
    </Grid>
  ))
}

注意：这里把单条活动的参数名从events改成了event，语义更清晰，避免和外层数组变量重名。

数据库查询阶段过滤（更优方案） #

如果活动数据量较大，不建议拉取全量活动到前端再过滤，可以直接在MongoDB查询时就筛选出当前用户参与的活动，减少不必要的数据传输，查询写法参考（Mongoose为例）：

// 直接查询当前用户参与的所有活动
const userEvents = await Event.find({
  "participants.email": currentProfile.email
})

MongoDB支持直接通过数组字段.嵌套属性的写法匹配数组内的元素，查询返回的结果直接就是符合要求的活动列表，前端拿到后直接调用map渲染即可，不需要额外写filter逻辑。

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