this is the first time to load 10 pieces of data. When I refresh it by sliding up or down, I can"t get the rest of the data

10page



(_loadMoreData),this._hasMoreDataundefined, this.state.isLoadingData,
constructor()isLoadingData,
_hasMoreData()
_fetchMoreData()this.state.isLoadingStatefalse,_fetchMoreData()

import React, { Component } from "react";
import {
    AppRegistry,
    TabBarIOS,
    ListView,
    TouchableHighlight,
    RefreshControl,
    Image,
    Dimensions,
    ActivityIndicator,
    StyleSheet,
    Text,
    View
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

import request from "../common/fetchMethod.js";
import Config from "../common/config.js";
 
const width = Dimensions.get("window").width

//,nextPage,
//items,totalResult
const cacleResult = {
    nextPage: 1,
    items: [],
    totalResult: 0 
}

class ChatList extends Component{
    constructor(props){
        super(props)
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([]),
            //(state)
            isLoadingData: false,
            //
            isRefreshing: false
        }
    }

    componentDidMount(){
        this._fetchData(1)
    }

    //
    _fetchData(page) {
        const that = this

        //,isLoadingDatastatetrue;
        //isRefreshingstatetrue
        if(page !== 0){
            this.setState({
                isLoadingData: true
            })
        }else{
            this.setState({
                isRefreshing: true
            })
        } 
        try {
            //request.get("http://www.rapapi.org/mockjs/33254/api/list?accessToken=labike&page=10")
            request.get(Config.api.baseUrl + Config.api.list, {
                accessToken: "labike",
                page: page
            })
                .then(data => {
                    console.log(data)
                    if(data.success){
                        //
                        let newItems = cacleResult.items.slice()

                        if(page !== 0){
                            //()
                            newItems = newItems.concat(data.data)
                            console.log(newItems.length)
                            cacleResult.nextPage += 1
                            console.log(cacleResult.nextPage)
                        }else{
                            //()
                            newItems = data.data.concat(newItems)
                        }
                        //console.log("new items:", newItems)
                    
                        
                        //cancleResultitems
                        cacleResult.items = newItems
                        console.log(cacleResult.items.length)

                        //console.log(cacleResult.items)
                        cacleResult.totalResult = data.total
                        //console.log(cacleResult.totalResult)

                        setTimeout(() => {
                            if(page !== 0){
                                that.setState({
                                    isLoadingData: false,
                                    dataSource: this.state.dataSource.cloneWithRows(
                                        //console.log(cacleResult.items),
                                        cacleResult.items
                                    )
                                })
                            }else{
                                that.setState({
                                    isRefreshing: false,
                                    dataSource: this.state.dataSource.cloneWithRows(
                                        //console.log(cacleResult.items),
                                        cacleResult.items
                                    )
                                })
                            }
                        }, 500)
                    }
                })
                .catch(error => {
                    if(page !== 0){
                        this.setState({
                            isLoadingData: false
                        })
                    }else{
                        this.setState({
                            isRefreshing: false
                        })
                    }
                    console.error(error)
                })
        } catch(error) {
            console.error(error);
        }
    }

    //
    _hasMoreData(){
        return cacleResult.items.length !== cacleResult.totalResult
    }

    //
    _fetchMoreData(){
        if(!this._hasMoreData || this.state.isLoadingData){
            return
        }
        const page = cacleResult.nextPage
        console.log(page)
        this._fetchData(page)
    }

    //view
    _renderItem = (item, index) => {
        return(
            <TouchableHighlight>
                <View style={styles.item}>
                    <Text style={styles.title}>{item.title}</Text>
                    <Image
                        source={{uri: item.thumb}}
                        style={styles.img}
                    >
                        <Icon
                            name="ios-play"
                            size={25}
                            style={styles.play}
                        />
                    </Image>
                    <View style={styles.itemFooter}>
                        <View style={styles.itemFooterBox}>
                            <Icon
                                name="ios-heart-outline"
                                size={25}
                                style={styles.up}
                            />
                            <Text style={styles.handlerText}></Text>
                        </View>
                        <View style={styles.itemFooterBox}>
                            <Icon
                                name="ios-chatboxes-outline"
                                size={25}
                                style={styles.comment}
                            />
                            <Text style={styles.handlerComment}></Text>
                        </View>
                    </View>
                </View>
            </TouchableHighlight>
        )
    }

    //
    _renderFooter(){
        if(!this._hasMoreData && cacleResult.totalResult !== 0){
            return(
                <View>
                    <Text style={styles.noHasMoreData}>...</Text>
                </View>
            )
        }
        // if(!this.state.isLoadingData){
        //     return <View style={styles.noHasMoreData} />
        // }

        return <ActivityIndicator style={[styles.centering, {height: 80}]} />
    }

    //
    _onRefresh(){
        if(!this._hasMoreData || this.state.isRefreshing){
            return
        }
        
        this._fetchData(0)
    }

    render(){
        return(
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headerTitle}>Header</Text>
                </View>
                <ListView
                      dataSource={this.state.dataSource}
                      renderRow={this._renderItem}
                    renderFooter={this._renderFooter}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefreshing}
                            onRefresh={this._onRefresh}
                            tintColor="-sharpff0000"
                            title="Loading..."
                        />
                    }
                    onEndReached={this._fetchMoreData}
                    onEndReachedThreshold={20}
                    showsVerticalScrollIndicator={false}
                    enableEmptySections={true}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "-sharpF5FCFF",
    },
    header: {
        paddingTop: 25,
        paddingBottom: 15,
        backgroundColor: "-sharpee735c"
    },
    headerTitle: {
        color: "-sharpfff",
        fontSize: 15,
        fontWeight: "600",
        textAlign: "center"
    },
    item: {
        width: width,
        marginBottom: 10,
        backgroundColor: "-sharpfff"
    },
    title: {
        padding: 10,
        fontSize: 18,
        color: "-sharp333"
    },
    img: {
        width: width,
        height: width * 0.5,
        resizeMode: "cover"
    },
    play: {
        position: "absolute",
        bottom: 14,
        right: 14,
        width: 46,
        height: 46,
        paddingTop: 9,
        paddingLeft: 18,
        backgroundColor: "transparent",
        borderColor: "-sharpfff",
        borderWidth: 1,
        borderRadius: 23,
        color: "-sharped7b66"
    },
    itemFooter: {
        flexDirection: "row",
        justifyContent: "space-between",
        backgroundColor: "-sharpeee"
    },
    itemFooterBox: {
        padding: 10,
        flexDirection: "row",
        width: width / 2 - 0.5,
        justifyContent: "center",
        backgroundColor: "-sharpfff"
    },
    handlerText: {
        color: "-sharp333",
        paddingLeft: 12,
        fontSize: 18
    },
    up: {
        color: "-sharp333",
        fontSize: 22
    },
    handlerComment: {
        color: "-sharp333",
        fontSize: 18
    },
    noHasMoreData: {
        color: "-sharp777",
        textAlign: "center"
    }
})


export default ChatList