Question

我的本机组件中有两个FlatList。它们充满了相似的数据，第二个FlatList大约包含80个项目。当第一个FlatList达到11个或更多项目时（我正在向第一个FlatList动态添加项目），第二个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

通过添加另一个过滤条件来解决此问题，将其从renderFurtherSuggestionItem函数中删除。在其他情况下，FlatList不会注意到数据的更改。

Answer 2

状态更改时，Flatlist不会再次提交。如果要重新渲染，请使用：

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

您应该使用状态更改后的状态，而不是yourState来重新呈现您的平面列表。

两个FlatList之一未在同一组件中呈现项目

2 个答案: