在 FlatList 中未调用 onEndReached 触发器答案

【问题标题】：onEndReached trigger is not being called in FlatList在 FlatList 中未调用 onEndReached 触发器
【发布时间】：2019-11-15 17:28:23
【问题描述】：

预期行为：页面到达结束时，应调用 handleLoadMore 函数。但它没有被调用。 [使用功能组件]。

我尝试过以下方式。但没有找到任何解决方案。

使用FlatGrid 组件（基于 FlatList 的库）。也直接使用了 FlatList。问题依然存在。

      <FlatGrid
        itemDimension={130}
        items={offers}
        renderItem={renderItem}
        ListFooterComponent={renderFooter}
        initialNumToRender={2}
        maxToRenderPerBatch={1}
        windowSize={2}
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0}
      />

HandleLoadMore 函数 -

  const handleLoadMore = () => {
    setPageNumber(pageNumber + 1);

    console.log('PageNumber', pageNumber);
    console.log('Item Length', offers.length);
    offersAction.getOffers(pageNumber);
  };

控制台输出 -

【问题讨论】：

你能发布组件的完整代码吗？也许 setPageNumber 有什么问题
使用完整示例时会发生什么？ github.com/saleel/react-native-super-grid#flatgrid-example
我用示例 console.log('Hello') 完全替换了代码。它仍然无法正常工作。问题是到达列表末尾后没有调用“handleLoadMore”函数。 @WojciechDynus
完美处理所有数据加载。我想问题不在于“FlatGrid”。用 FlaitList 替换了 FlatGrid... 仍然得到相同的行为。 @TreyCopeland
从您的输出看来它工作正常，有什么问题？

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

您可能需要将handleLoadMore 绑定到该类。来自The React Docs

一般情况下，如果引用的方法后面不带()，比如 onClick={this.handleClick}，你应该绑定那个方法。

【讨论】：

我正在使用功能组件。它用于基于类的组件。谢谢通知。添加有问题的信息。
然后您可以立即调用该方法，例如onEndReached={(e) => this.handleLoadMore(e)}
你可以看到reactjs.org/docs/handling-events.html。这不是必需的。这会报错。
我告诉你，你必须调用该方法。您正在引用一个命名方法，但您从未调用它。
我以你的方式打电话。正如预期的结果，应用程序崩溃了......

【解决方案2】：

我在父组件中使用 ScrollView 作为 FlatList 的包装器。正如https://github.com/facebook/react-native/issues/14756 中提到的那样，这是造成问题的原因。

使用“View”包装器代替“ScrollView”解决了这个问题。

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

【讨论】：