REACT-NATIVE：Flatlist 不會在道具更改時更新

Question

我有一個項目頁面，在該頁面上呈現與該項目相關的評論的平面列表，我遇到的問題是當我更改項目時，使用新道具（itemId）的 api 調用不會發生，並且來自上一個項目的評論被渲染。

我確定新的 itemId 正在被傳遞到屏幕，因為其他一切都發生了變化（名稱、圖像、描述......）

您到達商品頁面的方式是通過商店頁面呈現商品圖片列表（我在其中傳遞了在商品頁面上呈現商品所需的所有道具）

我確實注意到，當我在商品頁面上然后按回 go 返回商店頁面然后單擊另一個商品時，商品頁面在更新前顯示上一個商品的數據半秒鍾，但列表永遠不會更新它繼續使用舊的 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 和一般編碼相對較新，所以如果我需要更清楚，請告訴我。

謝謝你的幫助！

Answer 1

我遇到了類似的問題。 這是因為FlatList的props保持不變。 盡管對於單個renderItem ，它正在發生變化，但FlatList組件並沒有意識到這一點。

要解決這個問題，您可以使用extraData道具。

因此，如果您將extraData設置為FlatList ，例如extraData={this.props} ，這將在父組件的任何屬性發生更改時強制重新加載列表。