向列表中添加新项目时的 SectionList 重复项目（也在 FlatList 中）

Posted 2023-02-16

【中文标题】向列表中添加新项目时的 SectionList 重复项目（也在 FlatList 中）

【英文标题】：SectionList Duplicate items when adding new items to the list(Also in FlatList)

【发布时间】：2020-06-24 05:38:38

【问题描述】：

我在渲染 SectionList 时遇到了奇怪的问题。向列表中添加新项目时，先前添加的项目重复。在第一次渲染和添加第一个项目时不会发生，只有在第二次添加新项目然后继续时才会发生

代码如下：

<SectionList
  ref=ref => this.sectionList = ref
  sections=this.state.itemData
  renderItem=( item ) => this.renderMessages(item)
  renderSectionFooter=( section ) => this.renderSectionHeader(section)
  inverted
  onEndReachedThreshold=0.1
  onEndReached=() => this.handleMoreData()
  showsVerticalScrollIndicator=false
  style= flex: 1, margin: 5, opacity: 1 
  removeClippedSubviews=false
/>

我检查了我正在传递的数组，其中没有重复的数据，而且 renderItem 日志看起来也很好

【参考方案1】：

您缺少keyExtractor。

尝试类似：

keyExtractor=(item, index) => item + index

如果您的 this.state.itemData 元素具有唯一标识符，您可以将其用作 keyExtractor：

keyExtractor=(item) => item.id

此外，在向列表中添加新项目时，您可能需要考虑使用 extraData 以确保 sectionList 将重新呈现

extraData=this.state