reactjs - Flatlist onEndReached 无限循环

Question

我正在使用state来存储以下数据。

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

在 componentDidMount 上，我手动调用一个函数 _fetchData，它将数据加载到 this.state.data 中。

当平面列表滚动到末尾时，它会触发 _fetchData 两次，最终返回相同的数据两次(这是另一个问题，为什么它会触发两次？)。

一旦平面列表到达末尾，即不再从服务器返回数据，它就会进入无限循环，因为 onEndReached 不断地一遍又一遍地触发，即使没有新数据返回服务器和 this.state.data 保持不变。

这是我的渲染代码

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>

    );
}

Answer 1

我也有类似的问题。就我而言，这是因为 ListFooterComponent .

如果渲染 ListFooterComponent使用此模式或等效模式

onEndReachedThreshold={x} // for any x >= 0
ListFooterComponent={() => {
  if (isDataFetching) {
    return <SomeComponentWithSomeHeight />
  } else {
    return undefined;
  }
}}

它将触发onEndReached当用户向下滚动列表末尾时无限(或者如果您的内容不长于列表的可见区域)。

这是因为 <SomeComponentWithSomeHeight /> 的存在和不存在影响内容的高度，从而触发endReached重新计算。

以下是我能想到的可能的解决方案。

1. 使用否定 onEndReachedThreshold始终“高于” ListFooterComponent 的高度。但我不喜欢这个解决方案，因为很难知道“更高”(它是相对于 FlatList 的可见区域)。和负面onEndReachedThreshold可能会在 Android 上导致一些问题。

2. 在 FlatList 之外实现您自己的加载覆盖层这样加载组件就不会影响内容高度。

3. 设置opacity = 0隐藏ListFooterComponent而不是返回 undefined ，这样它就始终存在，并且当它变得可见时内容高度不会改变。

ListFooterComponent={() => {
  return (
    <View style={{ opacity: isDataFetching ? 1 : 0 }}>
      <SomeComponentWithSomeHeight />
    </View>
  );
}}