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

IT技术 reactjs react-native react-native-flatlist
2022-07-20 00:29:31

我的react-native组件中有两个 FlatList。对于第二个 FlatList,它们充满了相似的数据和大约 80 个项目。当第一个 FlatList 达到 11 个或更多项目时(我正在向第一个 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}
/>
2个回答

当状态改变时,Flatlist 不会再次重新渲染。如果你想重新渲染它应该使用:

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

而不是 yourState 你应该使用当它改变时你需要重新渲染你的平面列表的状态。

通过为过滤器添加另一个条件来解决这个问题,将其从 renderFurtherSuggestionItem 函数中删除。在另一种情况下,FlatList 不会注意到数据的变化。