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

【问题标题】：Best way to update a FlatList with Redux store使用 Redux 存储更新 FlatList 的最佳方法
【发布时间】：2017-10-03 20:26:57
【问题描述】：

我有一个带有嵌套对象的 Redux 存储：Part of the Redux store

我将数组的第一个元素用作 FlatList 的数据，因为我不想一次显示所有项目。

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

【问题讨论】：

标签： react-native redux

【解决方案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()），更新你的reducer并使用它的值作为data（this.props.listDataSource）。

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

希望对你有帮助。

【讨论】：

嗨，Soutot，感谢您的回答，但我意识到我的问题措辞不当，因此请原谅。我的问题与 Redux 更相关。如果我的商店已经包含了我所有的数据，但我只显示其中的一部分，假设是数组的第一个元素。用第一个元素显示第二个元素的最佳方式是什么。我是否应该将商店中的第二个元素与当前数据列表连接起来？