React FullCalendar v5:Event Sources用Promise无法显示事件
FullCalendar使用eventSources传入Promise后日程表为空的问题
为提升性能(尤其是交互性能),我尝试将FullCalendar组件改为使用eventSources,而非通过Promise.all批量调用API后传入事件数组。但问题在于,我的事件源是Promise,它确实返回了格式正确的事件数组,但FullCalendar日程表仍为空,我不清楚原因。
简化后的组件代码
<FullCalendar ref={calendarRef} schedulerLicenseKey={process.env.SCHEDULER_KEY} plugins={[resourceTimelinePlugin, interactionPlugin]} initialView='resourceTimelineMonth' locale="fr" timeZone="Europe/Paris" height="100%" headerToolbar={false} resources={filteredResources} eventSources={[ { // 部分参数依赖React Hook状态 events: satisfactionSourceEvents(planningType, filteredResources, horizon, draft, execId, parseInt(selectedSolution)) } ]} nowIndicator slotDuration="24:00:00" eventClick={handleEventClick} slotLabelContent={HeaderContent} resourceLabelContent={renderResourceContent} eventContent={renderEventContent} dateClick={handleDateClick} />
satisfactionSourceEvents函数代码
function satisfactionSourceEvents(planningType: PlanningType, resources: GroupResource[], horizon: any, draft?: PlanningDraft, execId?: number, solId?: number): Promise<any[]>{ let _serviceIds = resources.map(s => s.id) // 带多参数的API函数,返回timeline对象 return TimelineAPI.getTimeline(planningType, planningType === "draft" ? draft.id : null, execId ?? null, solId ?? null, { serviceIds: _serviceIds.join(), start: horizon.from.format(DateISOFormat), end: horizon.to.format(DateISOFormat), "withDetail.shifts": true, "withResult.demandSatisfactionMeasuresByShift": true, "withResult.demandSatisfactionMeasuresGlobal": false, }) // 返回符合FullCalendar格式的事件数组 .then(timeline => getSatisfactionDemandTimelineAsFCEventObject(timeline.result.demandSatisfactionMeasuresByShift, timeline.detail)) }
打印的正确格式数据
events(事件数组)
[ {"start": "2023-11-01T00:00:00","end": "2023-11-01T23:59:59", "resourceId": "1_2"}, {"start": "2023-11-02T00:00:00","end": "2023-11-02T23:59:59", "resourceId": "1_2"}, {"start": "2023-11-03T00:00:00","end": "2023-11-03T23:59:59", "resourceId": "1_2"}, ... ]
resources(资源数组)
[ { "id": 2, "title": "Service 2", "resourceType": "SERVICE", "children": [ { "id": "1_2", "title": "N7", "resourceType": "SHIFT", }, { "id": "2_2", "title": "B12", "resourceType": "SHIFT", }, ... ] } ]
API返回格式是正确的,因为格式未变,且改用eventSources之前能正常工作。请问是否可以在eventSources中使用Promise?
内容的提问来源于stack exchange,提问作者Minos
相关产品推荐
相关产品推荐

