REACT-NATIVE: Flatlist不会在属性更改时更新

Question

我有一个项目页面，我在上面呈现了一个与项目相关的评论的扁平列表，问题是当我更改项目时，新属性(ItemId)的api调用没有发生，并且呈现了前一个项目的评论。

我确信新的itemId正在被传递到屏幕上，因为其他一切都改变了(名称、图像、描述……)

到达商品页面的方法是通过商店页面呈现商品的图片列表(在这里我传递在商品页面上呈现商品所需的所有道具)

我确实注意到，当我在商品页面上按back返回到商店页面，然后点击另一个商品时，商品页面在更新之前会显示前一个商品的数据半秒钟，但列表从来没有更新过，它一直在调用旧的itemId。我使用fetch来获取列表，我也尝试过使用axios，同样的结果。

 componentDidMount() {
    this._isMounted = true;

    const { navigation } = this.props;

this.focusListener = navigation.addListener('didFocus', async () => {
    await fetch("https://api..." + navigation.getParam('itemId'))
            .then(response => response.json())
            .then((responseJson) => {
                this.setState({
                    loading: false,
                    dataSource: responseJson
                })
                console.log("response Comments:" + JSON.stringify(responseJson));
                console.log('the state of item id -->', this.props.navigation.getParam('itemId'))
            });
   }
}

当我console.log时，我得到了正确的itemId，但似乎调用发生在它接收新的道具之前……

我在一般的React Native和coding方面是相对较新的，所以如果我需要更清楚，请让我知道。

谢谢你的帮忙!

Answer 1

我也遇到过类似的问题。这是因为FlatList的props保持不变。虽然对于单个renderItem，它正在发生变化，但FlatList组件并不知道这一点。

要解决此问题，您可以使用extraData属性。

因此，如果您将extraData属性设置为FlatList，就像extraData={this.props}一样，当父组件的任何属性发生更改时，这将强制重新加载列表。