Question

我正在使用PureComponent渲染FlatList的项目，当我使用FlatList并将本地状态传递给数据时，渲染效果很好，我没有浪费的重新渲染。但是，当我将FlatList与来自我的redux存储中的数组一起使用在数据中时，如果向下滚动，则每次调用onReachEnd时，重新渲染都可以正常工作。但是当我没有更多数据要加载并且向上滚动时，我的所有项目都会重新渲染一个。

就像我的整个清单都丢失了。

我在数据中使用与本地状态完全相同的列表，并且效果很好！仅当我尝试使FlatList和Redux一起工作时才会出现该问题

Array
(
    [orange] => 100
    [bannana] => 200
    [apple] => 300
)

Answer 1

您可以尝试向清单添加新密钥吗？

 <FlatList
   key={Math.floor(Math.random())} 
   ref={(view) => this.list = view}
   data={this.props.requestsList}
   style={{flex: 1}}
   keyExtractor={(item) => String(item.emitter.id)}
   renderItem={this._renderRequestsItems}
   onEndReachedThreshold={0.5}
   onEndReached={!this.props.lastPage ? this._endReached : null}
   ListFooterComponent={reloadIndicator}
   ListHeaderComponent={this._getHeaderComponent}
   ListEmptyComponent={this._getEmptyComponent}
/>

这对我有用。

Answer 2

在FlatList组件上使用extraData属性，在这种情况下，额外数据可能来自道具，因此看起来像

extraData={this.prop}

使用Redux重新渲染FlatList

2 个答案: