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={(item) => item.id}

Также при добавлении новых элементов в ваш список вы можете рассмотреть возможность использования extraData, чтобы убедиться, что sectionList будет перерисовывать

extraData={this.state}