使用 API 调用在 React FullCalendar 中传递数据

Question

我通过 API 调用获取了一些数据，数据看起来像这样

{
"events": [
{
"id": 7, 
"comments": "", 
"origin": "Terrassa, Spain", 
"destination": "Delft, Netherlands",
"total_trucks": 0,
"material_type": "0", 
"scheduled_date": "2019-09-29T01:01:00", 
"offered_price": 0, 
"weight": 7979879, 
"status": "Assigned",
"posted_on": "2019-09-23T15:24:39.946644",
"All_India": true,
"Andhra_Pradesh": false,
"Assam": false,
"Bihar": false,
...
"West_Bengal": false,
"owner": 1,
"truck_type": 2,
"truck_name": 139
}
{
"id": 9, 
"comments": "", 
"origin": "Teyty, Spain", 
"destination": "Derry, Netherlands",
"total_trucks": 0,
"material_type": "0", 
"scheduled_date": "2019-09-29T01:01:00", 
"offered_price": 0, 
"weight": 7979879, 
"status": "Assigned",
"posted_on": "2019-09-23T15:24:39.946644",
"All_India": true,
"Andhra_Pradesh": false,
"Assam": false,
"Bihar": false,
...
"West_Bengal": false,
"owner": 1,
"truck_type": 2,
"truck_name": 139
}
]
}

根据这些数据，我希望在我的 reactFullCalender 和 total_weight 的事件中的"日期"字段中schedule_date，并在这些事件的标题中total_trucks。 到目前为止，我尝试过的方法使我在日历屏幕上的事件中输出为Object object。 我的代码是：

<FullCalendar defaultView="dayGridMonth" plugins={[ dayGridPlugin ]}
events={[{ title: this.state.calendarEvents, date: '2019-09-22'] />

我的 API 调用如下所示：

const calendarEvent = await getEventsData();
this.setState({calendarEvents:calendarEvent});
console.log(calendarEvent,
"calendarEvents");

我的状态看起来像这样：

this.state = {
calendarEvents:[
{totalTrucks:''},
{totalWeight:''}]};}

我想要的只是 API 调用日历事件获取数据，我想将其输入到完整日历中的事件中

Answer 1

你能用这个吗：

setStateAsync(state) {
return new Promise((resolve) => {
this.setState(state, resolve)
});

在从数据中获取状态后异步设置状态。

这有一个参考，我们异步设置 State。