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

【问题标题】：React-Native update UI when value on element in array changes, without using ForceUpdate当数组中元素的值发生变化时，React-Native 更新 UI，而不使用 ForceUpdate
【发布时间】：2018-06-21 01:35:13
【问题描述】：

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

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

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

【问题讨论】：

与其想象您的代码，不如将minimal reproducible example 添加到您的问题中，以便人们对其进行调试。更新 FlatList 的数据属性应该会触发重新渲染。
@bennygenel 不幸的是实际上没有。 FlatList 需要 extraData 属性来触发重新渲染。
@bennygenel 我没有不工作的错误/代码。这更像是一个代码工程问题。更新数组内容不会触发 UI 更新的问题已为人所知。而且我知道我必须使用 ExtraData，但更多关于如何使用，给定描述的设置..,.
有几种方法可以使用。你可以像你说的那样使用 extraData ，你可以将你的道具映射到 state 并使用 state 中的数据，或者你可以使用 shouldComponentUpdate 来决定重新渲染。这更多地取决于项目和开发人员的偏好。
@bennygenel 是有道理的。想知道是否有标准方法。似乎是间接的。

标签： user-interface react-native redux react-native-flatlist

【解决方案1】：

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

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

例子

 <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）

希望这会对你有所帮助。

【讨论】：