如何正确映射Firebase数据以适配react-native-calendars的Agenda组件格式

你现在的问题很明确：直接把allDays数组当作对象key时，JavaScript会自动把数组转成逗号分隔的字符串，这就导致出现了'2021-08-18, 2021-08-19, 2021-08-20'这种不符合组件要求的key。

要实现每个日期单独作为key并关联对应的预约信息，你需要做嵌套遍历：先遍历每个预约条目，再遍历该预约覆盖的所有日期，为每个日期单独赋值。另外还要考虑同一天可能有多个预约的情况，需要把新预约push到数组里而非直接覆盖原有内容。

正确的转换代码 #

let markedDayAll = {};

apiData.forEach(({ data: { start, end, allDays } }) => {
  // 遍历当前预约覆盖的每一天
  allDays.forEach(day => {
    // 如果该日期还没有对应的预约数组，先初始化空数组
    if (!markedDayAll[day]) {
      markedDayAll[day] = [];
    }
    // 将当前预约信息添加到该日期的列表中
    markedDayAll[day].push({ start, end });
  });
});

代码说明 #

1. 外层forEach遍历每个从API获取的预约条目，解构出需要的start、end和allDays字段
2. 内层forEach遍历当前预约的allDays数组，逐个处理每个日期
3. 对每个日期先做判断：如果markedDayAll里还没有这个日期的key，就先初始化一个空数组
4. 最后把当前的预约对象push到该日期对应的数组中

用你提供的示例数据转换后，会得到完全符合要求的结构：

{
  '2021-08-18': [{ start: "2021-08-18", end: "2021-08-20" }],
  '2021-08-19': [{ start: "2021-08-18", end: "2021-08-20" }],
  '2021-08-20': [
    { start: "2021-08-18", end: "2021-08-20" },
    { start: "2021-08-20", end: "2021-08-23" }
  ],
  '2021-08-21': [{ start: "2021-08-20", end: "2021-08-23" }],
  '2021-08-22': [{ start: "2021-08-20", end: "2021-08-23" }],
  '2021-08-23': [{ start: "2021-08-20", end: "2021-08-23" }]
}

这样就能完美适配Agenda组件的items参数要求了。

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