我使用了与议程示例相同的方法。要使用我的api数据,我将api数据存储在state中。我使用loadItems
函数将api数据转换为议程格式并存储在名为items
的状态中。但是该列表未显示在议程中。
loadItems
仅在选择日期时调用。
因此,在我的api被调用并存储了数据之后。我尝试选择其他日期。列表中未显示任何数据。
<Agenda
items={this.state.items}
loadItemsForMonth={this.loadItems.bind(this)}
renderItem={this.renderItem.bind(this)}
renderEmptyDate={this.renderEmptyDate.bind(this)}
rowHasChanged={this.rowHasChanged.bind(this)}
markingType={'period'}
theme={{
selectedDayTextColor: PRIMARY_COLOR,
}}
/>
{below I have converted my API data to format used in Agenda items}
loadItems(day) {
if (this.state.apiData == '') return;
if (this.state.apiData.data == undefined) return;
let data = this.state.apiData;
setTimeout(() => {
for (i = 0; i < data.data.length; i++) {
var now = new Date(data.data[i].from_ad);
//below date in format YYYY-MM-DD is made
var date =
now.toLocaleDateString().toString().split('/')[2] +
'-' +
now.toLocaleDateString().toString().split('/')[0] +
'-' +
now.toLocaleDateString().toString().split('/')[1];
if (!this.state.items[date]) {
this.state.items[date] = [];
this.state.items[date].push({
name: 'Item forss ' + date,
height: Math.max(50, Math.floor(Math.random() *
150))
});
}
}
const newItems = {};
Object.keys(this.state.items).forEach(key => { newItems[key]
= this.state.items[key]; });
this.setState({
items: newItems
});
}, 1000)
}