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 的文档

extraData

A marker property for telling the list to re-render (since it implementsPureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.

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

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