React Native:setState() 不会重新渲染 FlatList 子组件

Question

简而言之，我一直在遵循此处的教程。

这是有道理的，但是，我很难理解为什么需要为FlatList组件分配一个与状态关联的prop，以便在状态更改时重新呈现它。如果我按照示例省略extraData道具，则FlatList不会重新渲染。我以为setState()应该重新渲染一个组件及其所有子组件，但在这种情况下并非如此：我在这里错过了什么吗？

谢谢。

Answer 1

如果你看看这个页面 https://facebook.github.io/react-native/docs/flatlist.html

您可以看到他们正在设置state.selected，但我看不到您/他在本教程中正在这样做，也许是 this.state.selected 未设置为属性？

我认为您需要在onSelectItem()方法中添加要声明的selected，如下所示：

onSelectItem: (item) => {
    console.log('onSelectItem ', item);
    this.setState({
        selected: item
    });
},

Answer 2

在更仔细地阅读了FlatList组件的文档(谢谢，@Lucas Reppe Welander(之后，发现 FlatList 不是一个常规组件，但它实际上是一个PureComponent。这意味着即使父组件的状态发生变化，FlatList的"prop 比较也不会显示任何变化"，因为PureComponent"通过浅层 prop 和状态比较实现shouldComponentUpdate()"。我不完全确定这需要的所有复杂性，但这足以让我理解为什么在这种情况下我需要使用 extraData 道具。