this._hasMore is not a function.

Question

//'use strict'

import React ,{Component}from 'react';
import {StyleSheet,Text,View,ListView,TouchableHighlight,Image,Dimensions}from 'react-native';

var Icon = require('react-native-vector-icons/Ionicons');

var request = require('../comment/request');
var config = require('../comment/config');

var width = Dimensions.get('window').width;
var cachedResults = {
    nextPage:1,
    items:[],
    total:0
    }


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

    _renderRow(row){
        return(
        <TouchableHighlight>
        <View style={styles.item}>
        <Text style={styles.title}>{row.title}</Text>
        <Image
            source={{uri:row.thumb}}
            style={styles.thumb}
            >
        <Icon
            name='ios-play'
            size={28}
            style={styles.play} />
        </Image>

        <View style={styles.itemFooter}>
            <View style={styles.handleBox}>
                <Icon
                    name='ios-heart-outline'
                    size={28}
                    style={styles.up}
                    />
                <Text style={styles.handleText}>喜欢</Text>
            </View>

            <View style={styles.handleBox}>
                <Icon
                    name='ios-chatboxes-outline'
                    size={28}
                    style={styles.up}
                    />
                <Text style={styles.handleText}>评论</Text>
            </View>
        </View>
        </View>
        </TouchableHighlight>
        )
    }

    componentDidMount(){
        this._fetchData(1)
    }

    _fetchData(page){
        var that =this

        this.setState({
            isLoadingTail: true
        })

        return request.get(config.api.base + config.api.home, {
            accessToken: 'abc',
            page: page
        })
        .then((data) =>{
                if(data.success){
                    var items = cachedResults.items.slice()

                    items = items.concat(data.data)

                    cachedResults.items = items
                    cachedResults.total = data.total

                        this.setState({
                            isLoadingTail: false,
                            dataSource:that.state.dataSource.cloneWithRows(cachedResults.items)
                        })
                }
            })
        .catch((error) =>{
                this.setState({
                    isLoadingTail: false,
                })
                console.warn(error)
            })
    }

    _hasMore(){
         return cachedResults.items.length !== cachedResults.total
    }

    _fetchMoreData(){
        if(!this._hasMore() || this.state.isLoadingTail){
            return
        }

        var page = this.state.nextPage

        this._fetchData(page)
    }





    render(){
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headerTitle}>首页</Text>
                </View>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this._renderRow}
                onEndReached={this._fetchMoreData}
                onEndReachedThreshold={20}
                enableEmptySections = {true}
                />

            </View>
        )
    }
}

var styles = StyleSheet.create({
    container: {
        flex:1
    },
    header:{
        paddingTop:25,
        paddingBottom:12,
        backgroundColor:'#ee735c'
    },
    headerTitle:{
        color:'#fff',
        fontSize: 16,
        textAlign:'center',
        fontWeight:'600'
    },
    item:{
        width: width,
        marginBottom:10,
        backgroundColor:'#fff'
    },
    thumb:{
        width:width,
        height:width*0.56,
        resizeMode:'cover'
        //backgroundColor:'red'
    },
    title:{
        padding:10,
        fontSize:18,
        color:'#333'
    },
    itemFooter:{
        flexDirection:'row',
        justifyContent:'space-between',
        backgroundColor:'#eee'
    },
    handleBox:{
        flexDirection:'row',
        padding:10,
        width:width/2-0.5,
        justifyContent:'center',
        backgroundColor:'#fff'
    },
    play:{
        position:'absolute',
        bottom:14,
        right:14,
        width:46,
        height:46,
        paddingTop:9,
        paddingLeft:18,
        //backgroundColor:'red',
        borderWidth:1,
        //borderRadius:23,
        borderColor:'#fff',
        color:'black'
    },
    handleText:{
        paddingLeft:12,
        fontSize:18,
        color:'#333'
    },
    up:{
        fontSize:22,
        color:'#333'
    },
    commentIcon:{
        fontSize:22,
        color:'#333'
    }


});

module.exports = Home;

上面是文件代码，下拉翻页出现以下错误。

this._hasMore is not a function.(In 'this._hasMore()','this.hasMore'is undefined)

Answer 1

Scott 2016-09-24 21:09:43

ES6 的写法跟 ES5 不同的，这个课程，以 ES5 为基础来实现，向上跃迁到 ES6 的课程还没有录制，可能会放到 2 期，或者追加到这个课程之后，可以关注下。

这里 class 的方式，this 需要指定的，bind 呢也是一种方式，比如

onEndReached={this._fetchMoreData.bind(this)}

但是光改这一个地方，并不够，用 ES6 开发，会有更多需要注意和可能出错的地方，如果你完全能 handle  ES6，可以往下开发，如果不能的话，建议降级到 ES5 的方式开发，在升级课程录制放出来之前，此类问题不会再予解答，请谅解。

• 提问者 shibo1817 #1

  了解，非常感谢！