Javascript 为什么我的分区列表有时只呈现一个分区？

我对

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;
}

const数据={
章节：[{
名称：“第一”，
项目：[{
名称：“项目1”，
...   
}]
},
{
姓名：“第二”，
项目：[{
名称：“项目20”，
...   
}]
}]
};
public render（）：JSX.Element{
返回(
this.renderItem（项目）}
renderSectionHeader={（节）=>this.renderHeader（节）}
sections={this.getSections（数据）}
keyExtractor={（{，索引）=>String（索引）}
/>
);
}
getSections（数据）：SectionListData[]{
const sections=data.sections.map（section=>{
返回{
标题：section.name，
数据：第1.2节项目
};
});
回流段；
}

---

我做了一些测试，并从视图层次结构中删除了

ScrollView

，它似乎已经解决了这个问题，我无法重现它。我相信ScrollView有时会导致部分列表出现问题，但我不知道为什么，也不知道如何证明这一点。有没有办法深入了解这个问题的原因？或者其他人以前遇到过这个问题吗？提前谢谢

节列表有自己的滚动行为，由提供。如果在ScrollView中包装SectionList，则scroll事件将被劫持，并删除所需的剖切行为

因为SectionList延迟加载，如果它没有访问滚动位置的权限，那么它无法计算它是否超出了onEndReachedThreshold并调用onEndReached（加载更多项）

SectionList和FlatList被设计为具有无限滚动，因此您不应该在另一个ScrollView中包装它们。如果您需要能够滚动屏幕上的项目列表（无需延迟加载/分页），我会将它们全部静态加载到ScrollView中