我从google calendar api
获取数据并将其存储到一个状态(工作正常,因为console.log显示数据)。
但是当我将this.state.items
添加到 flatlist 数据时,它会给我错误:
Tried to get frame for out of range index 0
这就是我获取数据的方式:
constructor(props) {
super(props);
this.state = {
items: {},
loading: false,
};
}
componentDidMount() {
this.loadItems();
}
loadItems() {
setTimeout(() => {
const CALENDAR_ID = 'some cal ID';
const API_KEY = 'API KEY';
const beginDate = moment();
let url = `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR_ID}/events?key=${API_KEY}&timeMin=${beginDate.toISOString()}&singleEvents=true&orderBy=startTime`;
this.setState({ loading: true });
fetch(url)
.then(res => res.json())
.then(res => {
const events = res.items;
if (events.length > 0) {
const newItems = {};
for (let j = 0; j < events.length; j++) {
const event = events[j];
const sTime = event.start.dateTime || event.start.date;
const eTime = event.end.dateTime || event.end.date;
const csTime = moment(sTime).format('YYYY-MM-DD');
const ceTime = moment(eTime).format('YYYY-MM-DD');
const csTime2 = moment(sTime).format('LT');
const ceTime2 = moment(eTime).format('LT');
if (!newItems[csTime]) {
newItems[csTime] = [];
}
newItems[csTime].push({
title: event.summary,
startTime: csTime2,
endTime: ceTime2,
description: event.description
})
}
this.setState({
items: newItems,
loading: false,
});
}
})
.catch(error => {
console.log('error', {error, loading: false});
});
}, 2000);
}
<FlatList
data={this.state.items}
renderItem={({ item }) => (
<View style={[styles.item, {height: item.height}]}><Text style={styles.title}>{item.title}</Text><Text>{item.startTime} - {item.endTime}</Text><Text>{item.description}</Text></View>
)}
keyExtractor={(item, index) => String(index)}
ListFooterComponent={this.renderFooter}
/>
索引是日期(例如2018-04-25)。
为什么会出现此错误?怎么办?