Question

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

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

定时重载不是首选。我当时想让线程更新（通过增加）redux中名为MessageThreadUpdateCount的值，该值可以是一个数字。每当任何UI连接值更改时，都将执行此操作。 FlatList然后使用该redux值作为其ExtraData的道具。因此，当变化时更新。使用布尔值而不是数字会引发问题：什么将其设置为false，何时设置？还有其他建议吗？

Answer 1

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

这是一个PureComponent，这意味着如果props保持浅且相等，它将不会重新渲染。确保您的renderItem函数依赖的所有内容都作为更新后不是===的道具（例如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）

希望这会对您有所帮助。

当数组中元素上的值更改时，无需使用ForceUpdate时，React-Native更新UI

1 个答案: