REACT-NATIVE：Flatlist 不会在道具更改时更新

Question

我有一个项目页面，我在该页面上呈现与该项目相关的评论的平面列表，我遇到的问题是当我更改项目时，没有发生带有新道具（itemId）的 api 调用，并且来自上一个项目的评论被渲染。

我确定新的 itemId 正在被传递到屏幕，因为其他一切都发生了变化（名称、图像、描述......）

您到达商品页面的方式是通过商店页面呈现商品图片列表（我在其中传递了在商品页面上呈现商品所需的所有道具）

我确实注意到，当我在项目页面上然后按返回返回商店页面然后单击另一个项目时，项目页面在更新前显示上一个项目的数据半秒钟，但列表从来没有更新它继续使用旧的 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

我遇到了类似的问题。这是因为propsofFlatList保持不变。尽管对于个人renderItem来说，它正在发生变化，但FlatList 组件并没有意识到这一点。要解决这个问题，您可以使用extraData道具。因此，如果您将extraDataprop 设置为FlatListlike extraData={this.props}，这将在父组件的任何 prop 更改时强制重新加载列表。