Flatlist onEndReached бесконечный цикл - PullRequest
Новая
       27

Flatlist onEndReached бесконечный цикл

0 голосов
/ 16 мая 2018

Я использую state для хранения следующих данных. 

state = {
    refresh: true,
    isFetching: true,
    showLoadingBottom: false,
    data: []
};

при componentDidMount Я вручную вызываю функцию _fetchData, которая загружает данные в this.state.data.

Когда плоский список прокручивается до конца, он запускает _fetchData дважды, что в итоге возвращает те же данные дважды (что является еще одной проблемой, почему оно запускается дважды?).

Как только плоский список достигает конца, т. Е. С сервера больше не возвращается никаких данных, он входит в бесконечный цикл, поскольку onEndReached непрерывно запускается снова и снова, даже если с сервера не возвращаются новые данныеи this.state.data остается прежним.

Это мой render код 

render() {

    return (

        <View
            style={{
                flex: 1
            }}>

            <FlatList

                refreshControl={
                    <RefreshControl
                        refreshing={this.state.refresh}
                        onRefresh={() => {
                            this.setState({
                                refresh: true
                            }, this._fetchData);
                        }}
                        title={"Pull To Refresh"}
                        tintColor={darkGrey}
                        titleColor={darkGrey}/>
                }

                onEndReachedThreshold={0.5}
                onEndReached={() => {
                    this.setState({
                        showLoadingBottom: true
                    }, () => {
                        this._fetchData();
                    });

                }}

                showsVerticalScrollIndicator={false}

                data={this.state.data}

                ListFooterComponent={() => {
                    return (
                        this.state.showLoadingBottom &&
                        <View style={{padding: 10}}>
                            <ActivityIndicator size="small" color={colorAccent}/>
                        </View>
                    );
                }}

                renderItem={this._renderItem}

                keyExtractor={(item) => item.id.toString()}

                removeClippedSubviews={true}

            />

        </View>

    );
}

1 Ответ

0 голосов
/ 19 мая 2018

Вы используете компонент, который отображается при загрузке данных, верно? Таким образом, ваш плоский список необходимо изменить. Вы должны быть уверены, что вызываете метод извлечения только один раз, даже если ваш конец достигнут несколько раз.

...