在Flatlist上获取超出范围索引0的帧

时间:2018-04-03 15:00:58

标签: react-native react-native-flatlist

我从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)。

为什么会出现此错误?怎么办?

0 个答案:

没有答案