时间戳

首页 > 解决方案 > 当数组中元素的值发生变化时，React-Native 更新 UI，而不使用 ForceUpdate

user-interface - 当数组中元素的值发生变化时，React-Native 更新 UI，而不使用 ForceUpdate

问题描述

想象一下：我有一个FlatList显示消息线程的列表。每个单元格都有一个标签，显示该线程中的新消息数量。每个单元格还显示该线程中最新消息的截断字符串。还介绍了其他东西。线程列表被保存redux并设置为 my 的数据属性FlatList。线程的类实例不知道 FlatList 并且在某些变化时不能强制重新加载它，例如新消息进来（有意设计）。现在的问题是FlatList发生此类事件时不会更新。它仅在设置新线程数组（新实例）时更新。

当线程中的任何值发生更改时，如何获取FlatList更新？

定时重复重新加载不是首选。我正在考虑让线程更新（通过增加）redux调用MessageThreadUpdateCount中的值，该值将是一个数字。每次任何 UI 连接值更改时都会这样做。然后FlatList使用该 redux值作为它的ExtraData道具。因此，当它发生变化时更新。使用布尔值而不是数字会引发一个问题：什么应该将其设置为 false，以及何时设置？还有其他建议吗？

标签： user-interfacereact-nativereduxreact-native-flatlist

解决方案

要更新列表，您需要设置 FlatList 组件的 'extraData' 属性，

这是一个 PureComponent，这意味着如果 props 保持浅相等，它将不会重新渲染。确保您的 renderItem 函数所依赖的所有内容都作为更新后不 === 的 prop（例如 extraData）传递，否则您的 UI 可能不会在更改时更新。这包括数据道具和父组件状态。

例子

 <FlatList
    data={this.props.data}
    extraData={this.state}
    keyExtractor={this._keyExtractor}
    renderItem={this._renderItem}
  />

当您收到新消息时，您的状态会发生变化。请注意，您可以将“this.state”替换为在收到新消息时更新的任何变量，例如计数器。

（来源：https ://facebook.github.io/react-native/docs/flatlist.html ）

希望这会帮助你。

推荐阅读