Question

我正在构建一个应用本机的应用程序，我正在使用Lisview显示一些数据，因为一些奇怪的原因，endReached是自动触发的，而我没有滚动listview，listView最终显示所有项目，就像我增加了页面值每次，我也会得到重复的第一次api通话结果，第1页值。

代码：

import React, {Component} from 'react';
import {Alert, ListView, Text, View} from 'react-native';
import categoryApi from './category.api';
import styles from './category.styles';
import CategoryItem from './category.items.component';
import ShopsNear from "../listshops/list-shops.component";

export default class Category extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            rawData: [],
            isLoading: false,
            categories: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            }),
            page: 1,
        };
    }

    static navigationOptions = {
        headerTitle: 'Categories',
        title: 'Categories',
    };

    componentDidMount() {
        this.fetchCategories();
    }

    fetchCategories() {
        this.setState({isLoading: true});
        categoryApi.getOne(this.state.page).then(response => {
            if (response.data) {
                this.setState({
                    rawData: this.state.rawData.concat(response.data.data),
                    categories: this.state.categories.cloneWithRows(this.state.rawData.concat(response.data.data)),
                    isLoading: false,
                });
            } else {
                this.setState({isLoading: false});
                Alert.alert(
                    'Something wrong happened!',
                    'My Alert Msg',
                    [],
                    {cancelable: true}
                )
            }
        });
    }

    componentWillMount() {

    }

    showMore = () => {
        this.setState({page: this.state.page + 1});
        console.log("End reached... page: " + this.state.page);
        this.fetchCategories();
    };

    render() {
        const {navigate} = this.props.navigation;

        return (
            <View style={styles.container}>
                <View style={styles.projektiHeader}>
                    <Text style={styles.projekti}>VALITSE PROJEKTI</Text>
                </View>
                <View style={styles.categoriesList}>
                    <ListView
                        dataSource={this.state.categories}
                        renderRow={(rowData) => <CategoryItem navigate={navigate} item={rowData}/>}
                        renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator}/>}
                        onEndReached={this.showMore}
                    />
                </View>
                <View style={styles.shopsNear}>
                    <ShopsNear navigate={navigate}/>
                </View>
            </View>
        );
    }
}

基本上showMore（）本身，任何人都知道这里发生了什么？我每次滚动并到达listview的末尾以调用showMore函数时都试图实现这一点，该函数将从API中获取数据。

Answer 1

检查listView组件的onEndReachedThreshold道具。

ListView触发endReached本身，React Native

1 个答案: