反应本机日历议程不显示具有相同日期的项目

Question

我目前正在使用 React Native Calendars library to build an agenda-like app on React Native, to get the data I need, I use Firebase Firestore 库。

该图书馆的议程使用了一些属性来显示约会卡片：

我的议程设置

          <Agenda
            items={agenda.items}
            // Initially selected day
            selected={date}
            // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
            minDate={today}
            // Specify how each item should be rendered in agenda
            renderItem={(item, firstItemInDay) => {
                return <View>
                    <PlanningCard
                    style={styles.appointmentCard}
                    hour={String(moment.unix(item.date).format("H[h]mm"))}
                    ></PlanningCard>
                </View>;
            }}
            />

这是我从函数中获得的数据 -> props

这是我调用的函数，它是一个巨大的混乱，因为我试图找出一种方法来获取我需要在日历和议程上显示的每一个信息。

export const retrievePlanning = async (uid:string) => {
    let getAppointments:any;
    let appointments:any = {};
    let markedDates:any = {};
    let agendaItems:any = {};
    let user:any;
    let docDate:string;
    
    let today:string = String(moment().format("YYYY-MM-DD"));

    try{

        getAppointments = await firestore()
                                .collection('appointments')
                                .where('marchand_id', '==', uid)
                                .get(); // Recup
        
        getAppointments.forEach(async(doc:any) => { // Loop on appointments

            appointments[doc.id] = doc.data(); // Storing appointments
            docDate = moment.unix(doc.data().date).format("YYYY-MM-DD"); // Unix timestamp to agenda's date format
            markedDates[docDate] = {marked: true, dotColor: 'deepskyblue'} // Storing appointment dates (for calendar markers)

            try {
                user = await firestore()
                            .collection('users')
                            .doc(String(doc.data().customer_id))
                            .get(); // User who the appointment belongs to
                
                console.log("test, does this work??")

                // HERE IS THE ISSUE !!!
                            
                agendaItems[docDate] = [doc.data(), user.data()] // Storing appointment dates (to show them as agenda items)

                
            } catch (error:any) {
                console.log(error);
                Alert.alert("Error", String(error.message));
            }

        });

        //console.log(agendaItems)
        //console.log(calendarDates)
        //console.log(planning);

        return {planning: appointments, dates: markedDates, items: agendaItems}

    } catch (error:any) {
        console.log(error);
        Alert.alert("Error", String(error.message));
    }
    
}

问题出现在约会循环内，我想在其中获得日期相同但时间不同的多个约会。

我需要创建一个对象来存储 3 种类型的信息：

格式化约会日期（用于日历标记）
每次约会的完整数据（作为道具传递到下一个屏幕）
格式化约会日期 + 约会数据 + 用户数据（显示议程卡）

问题是我无法附加多个相同的索引值（索引是日期），例如，假设我同一天有 2 个约会，它应该如下所示：

{ 
  "2022-01-24": [{appointment 1 data}],
  "2022-01-24": [{appointment 2 data}],
  "2022-01-28": [{some other appointment data}],
}

但它看起来像这样：

{ 
  "2022-01-24": [{appointment 2 data}],
  "2022-01-28": [{some other appointment data}],
}

这意味着我每天只能显示 1 个约会。有什么办法可以使上面的例子成为可能吗？或者有什么我可以做的，也许可以解决这个问题？

PS：我的母语不是英语所以请不要因为我的语法而杀了我。而且我还小，所以这段代码一团糟。

Answer 1

做这样的事情：

遍历所有约会并将每个键初始化为空数组
再次遍历你所有的约会并将约会推送到每个日期

即

第一步：

 for(appointment of appointments){
   items[formatDate(appointment.date,'YYYY-MM-DD')] = []; 
 }

第 2 步：

 for(appointment of appointments){
   items[formatDate(appointment.date,'YYYY-MM-DD')].push({
      // Your agenda item
    }) 
 }

反应本机日历议程不显示具有相同日期的项目

React native calendars agenda not showing items with same date

json

typescript

react-native

google-cloud-firestore

react-native-calendars