Один из двух FlatLists не отображает элементы в одном и том же компоненте

Question

У меня есть два FlatLists в моем собственном компоненте реакции.Они заполнены похожими данными и около 80 пунктов для второго FlatList.Когда первый FlatList достигает 11 или более элементов (я динамически добавляю элементы в первый FlatList), второй перестает отображать элементы, и он становится пустым, даже если выбор фильтра правильный.Это первый FlatList:

<FlatList
  style={styles.flatList}
  data={todaySuggestions}
  renderItem={this.renderSuggestionItem}
  keyExtractor={this.keyExtractor}
  extraData={this.props}
/>

А второй:

<FlatList
 style={styles.flatList}
 data={data.filter(item => !completedItems.find(item1 => item1.id === item.id).completed)}
 renderItem={this.renderFurtherSuggestionItem}
 keyExtractor={this.keyExtractor}
 extraData={this.props}
/>

Answer 1

при изменении состояния, Flatlist больше не рендерится.если вы хотите выполнить повторную визуализацию, вы должны использовать:

     <FlatList
       data:{yourData}
       extraData:{this.state.yourState}
       renderItem={this.yourRenderItem}
/>

вместо вашего состояния, в котором вы должны использовать состояние, при котором вам необходимо повторно отображать плоский список.

Answer 2

Решил это, добавив еще одно условие для фильтра, удалив его из функции renderFutureSuggestionItem.В другом случае FlatList не заметит изменения данных.