react-native-redux：更改状态不重新渲染子组件

Question

可能我不完全理解当状态改变时 react-native 组件重新渲染的情况。

我有一个名为 MyFlatList 的自定义 FlatList 组件.....它是更大屏幕组件的子组件。

我按照下面的方法将 redux 值传递给 MyFlatList

const mapStateToProps = state => ({
  rdx_places: state.places,
});

....然后我在 FlatList 的 renderItem 属性中使用它，如下所示

renderItem={({item}) => { 
let placeName = this.props.rdx_places[item.place_id].placeName;

...然后我在 return 语句中使用从 redux 中提取的变量

return (variable placeName used here)

当我触发 action creator 更改 redux 状态 (state.places)..我可以看到它成功更新了 Redux 中的状态....但是 FlatList 不会重新渲染。

有趣的是，父组件确实会重新渲染（父组件也通过mapStateToProps 传递了相同的状态）

Answer 1

来自 FlatList 的文档

额外数据

用于告诉列表重新渲染的标记属性（因为它实现了PureComponent）。如果您的任何 renderItem、Header、Footer 等函数依赖于 data 属性之外的任何内容，请将其粘贴在这里并不可变地对待它。

您的 FlatList 的任何数据依赖项都依赖于该更改，并且应该导致 FlatListe 重新呈现，必须由 extraData 提供。

因此，您通过将数据提供给数据来提供数据，然后将可能更改的状态传递给 extraData。然后，只要 extraData 发生变化，组件就会重新渲染。