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

Question

渲染 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 日志看起来也很好

Answer 1

您缺少一个keyExtractor.

尝试类似：

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

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

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

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

extraData={this.state}