使用Redux存储更新FlatList的最佳方法

Question

我有一个带有嵌套对象的Redux商店:Redux商店的一部分

我正在使用数组的第一个元素作为我的FlatList的数据,因为我不想一次显示所有项目.

但是,如果我想添加数组的第二个元素并更新列表.什么是最好的解决方案？

Answer 1

将您的值设置data为状态道具，您可以使用它来设置距您希望触发的onEndReachedThreshold底部的滚动距离。onEndReached然后调用您的函数来加载更多项目onEndReached，然后您的 FlatList 将被更新。

它看起来像这样：

<FlatList
  data={this.state.listDataSource}
  renderItem={({ item, index }) => this.renderListItem(item, index)}
  keyExtractor={this._keyExtractor} // dont'forget to declare _keyExtractor
  onEndReachedThreshold={0.5} //when scroll reach half distance from bottom. Min value 0, max 1.
  onEndReached={() => this.loadMoreItems()} // this.setState({ listDataSource: newList }), for instance
/>

在上面的例子中，每次滚动到列表的一半时，都会触发该onEndReached函数。

如果您不想使用组件状态，您还可以触发一个操作 ( this.props.loadMoreItems())，更新您的减速器并将其值用作data( this.props.listDataSource)。

您可以在官方文档中找到更多详细信息：https ://facebook.github.io/react-native/docs/flatlist.html

希望能帮助到你。