onEndReach 不执行



  • 代码如下 :
    onEndReach 加载更多始终不执行

    import React, {Component} from 'react';
    import {
    Platform,
    StyleSheet,
    Text,
    FlatList,
    View, Image
    } from 'react-native';

    import px2dp from "../../utls/SizeUtils";

    let client = require('../../net/HttClient')

    export default class GoodListView extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            show: false,
            dataSource: null,
            refresh: false,
            page: 1,
        };
    }
    
    getData() {
        this.setState(previousState => {
            return {
                refresh: true,
            };
        });
        client.getGoodsBaseCategory(null, "289c127e772b43a2ae3d459857eb550c", 1, (res) => {
            console.info(res)
            this.setState(previousState => {
                return {
                    show: true,
                    refresh: false,
                    dataSource: res
                };
            });
        }, (err) => {
            console.info(err)
        })
    }
    
    componentDidMount() {
        this.getData()
    }
    
    render() {
        console.info('state:' + this.state.show)
        if (this.state.show) {
            return (
                <FlatList
                    numColumns={2}
                    data={this.state.dataSource}
                    refreshing={this.state.refresh}
                    onRefresh={() => {
                        console.info("刷新")
                        this.getData()
                    }}
                    onEndReachedThreshold={0.1}
                    onEndReach={() => {
                        this.state.page++
                        console.info("加载更多")
                        this.getData()
                    }}
                    ListFooterComponent={
                        <Text>加载更多</Text>
                    }
                    renderItem={({item}) =>
                        <View style={{flex: 1, flexDirection: 'column'}}>
                            <Image source={{uri: item.mainPic}}
                                   style={{width: px2dp(100), height: px2dp(100)}}/>
                            <Text>{item.goodsName}</Text>
                        </View>
                    }
                />
            )
        } else {
            return (
                <View style={{backgroundColor: '#2B685E', flex: 1}}>
                </View>
    
            )
        }
    
    }
    

    }



  • getData需要写成箭头函数形式以绑定this

    getData = () => {
      this.setState......
    }
    

    另外this.state.page++的写法也是错的,必须使用setState修改state



  • 谢谢指正,
    另外onEndReach是因为后面漏了ed....正确是onEndReached,
    哎...怎么就没有warning呢