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

【问题标题】：SectionList Duplicate items when adding new items to the list(Also in FlatList)向列表中添加新项目时的 SectionList 重复项目（也在 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 日志看起来也很好

【问题讨论】：

标签： react-native duplicates rendering react-native-flatlist react-native-sectionlist

【解决方案1】：

您缺少keyExtractor。

尝试类似：

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

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

keyExtractor={(item) => item.id}

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

extraData={this.state}

【讨论】：