为啥我的 SectionList 有时只呈现一个部分？

Posted 2023-03-13

【中文标题】为啥我的 SectionList 有时只呈现一个部分？

【英文标题】：Why does my SectionList sometimes only render one section?为什么我的 SectionList 有时只呈现一个部分？

【发布时间】：2019-06-12 06:58:36

【问题描述】：

我遇到了SectionList 组件的问题，有时它不会呈现所有部分，而是只呈现第一部分。我做了一些调试，可能找到了修复方法，但我不知道为什么它修复了问题。

我的页面将始终呈现第一部分，但有时它不会呈现第二部分。通过一些测试，我发现如果我将所有项目放在一个部分下，它总是可以毫无问题地渲染。只有当另一个部分中有很多项目时才会出现此问题。

代码如下所示：

const data = 
   sections: [
      name: "First",
      items: [
         name: "Item 1",
         ...   
      ]
   ,
   
      name: "Second",
      items: [
         name: "Item 20",
         ...   
      ]
   ]
;

public render(): JSX.Element 
   return (
       <SafeAreaView>
           <ScrollView refreshControl=this.getRefreshControl()>
               <SectionList
                   renderItem=(item) => this.renderItem(item)
                   renderSectionHeader=(section) => this.renderHeader(section)
                   sections=this.getSections(data)
                   keyExtractor=(_, index) => String(index)
               />
           </ScrollView>
       </SafeAreaView>
   );


getSections(data): SectionListData<any>[] 
    const sections = data.sections.map(section => 
        return 
            title: section.name,
            data: section.items
        ;
    );

    return sections;

我做了一些测试并从视图层次结构中删除了ScrollView，它似乎已经解决了这个问题，但我无法重现它。我相信 ScrollView 有时会以某种方式导致 SectionList 出现问题，但我不知道为什么，也不知道如何证明这一点。有没有办法深入了解为什么会发生这个问题？或者以前有没有其他人遇到过这个问题？提前致谢！

【参考方案1】：

SectionLists 有自己的滚动行为，由VirtualizedList 提供。如果您将 SectionList 包装在 ScrollView 中，则滚动事件将被劫持并删除您想要的分段行为。

由于 SectionList 延迟加载，如果它无法访问滚动位置，则无法计算是否超出 onEndReachedThreshold 并调用 onEndReached（以加载更多项目）。

SectionLists 和 FlatLists 被设计成可以无限滚动，所以你永远不应该将它们包装在另一个 ScrollView 中。相反，如果您需要能够滚动浏览屏幕上的项目列表（没有延迟加载/分页），我会将它们全部静态加载到 ScrollView 中。