React嵌套Map重复渲染问题：如何过滤已预约时段？

问题根源 #

你当前的代码外层遍历existingBookings（3条预约），每条预约都对应渲染一整套availableTimes列表，自然会出现3组重复的时段内容。正确的逻辑应该是遍历可用时段，逐个判断是否被任何预约占用，而不是反过来。

修复方案 #

1. 新增辅助函数判断时段是否已预约 #

先写一个工具函数，用来检查某个时间是否落在任意已预约的时间段内：

const isTimeBooked = (time) => {
  // 构造完整时间对象（注意这里的日期要和预约记录的日期匹配，示例用2023-05-06）
  const targetTime = moment(`2023-05-06 ${time}`, 'YYYY-MM-DD HH:mm');
  // 遍历所有预约记录，判断当前时间是否在某个预约的起止区间内
  return existingBookings.some(booking => {
    const startTime = moment(booking.stDate);
    const endTime = moment(booking.enDate);
    return targetTime.isSameOrAfter(startTime) && targetTime.isSameOrBefore(endTime);
  });
};

2. 重构渲染逻辑 #

去掉外层的existingBookings.map，直接遍历availableTimes，用上面的辅助函数判断每个时段的状态：

<View>
  <ScrollView horizontal style={{paddingTop: 20, paddingBottom: 25}}>
    {availableTimes.map((time, index) => {
      // 判断当前时段是否已被预约
      const status = isTimeBooked(time) ? 'Booked' : 'Available';
      // 注意：这里用time作为key更可靠，避免index导致的渲染异常
      return buildTimeScrollView(time, index, status);
    })}
  </ScrollView>
</View>

关键说明 #

• 移除了外层的ListItem和existingBookings循环，彻底避免重复渲染多套时段列表
• 用some方法替代嵌套循环，更高效地判断时段是否被占用
• 修正了原代码中availableTimes.map的参数顺序错误（原代码写反了index和item）
• 统一日期为示例中的2023-05-06，确保和预约记录的日期匹配（你可以根据实际场景改成动态日期）

这样修改后，只会渲染一套完整的可用时段列表，其中09:00-13:30的时段会被标记为已预约，之后的时段显示可用，不会出现重复内容。

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