时间戳

首页 > 解决方案 > ComponentDidUpdate 在移动设备上导致滞后/崩溃，而不是在桌面上

reactjs - ComponentDidUpdate 在移动设备上导致滞后/崩溃，而不是在桌面上

问题描述

我的 ReactJs 项目中有一个显示产品的页面。在该页面的底部有一个类似产品的列表。当有人单击列表中的其中一个产品时，他们会链接到他们已经在同一页面（组件）上，即原始产品页面。这改变了产品。为了更新这一点，我调度了一个函数，该函数使用更新的 id 重新获取产品。下面的例子。

componentDidMount() {
    window.scrollTo(0, 0)

    this.props.fetch(this.props.match.params.id);

    this.updateWindowDimensions();
    window.addEventListener('resize', this.updateWindowDimensions);
}

componentDidUpdate(prevProps) {
    if(prevProps.data !== this.props.data) {
        this.updateItem()
    }
}

updateItem = () => {
    this.props.fetch(this.props.match.params.id)
}

在我的浏览器中，事情按预期工作。现在，当我在手机上打开应用程序时，页面加载，变得迟钝，然后服务器崩溃。如果我删除 componentDidUpdate 功能，页面加载在我的手机上就可以了。

我无法弄清楚为什么会发生这种情况以及我能做些什么来解决它。我已经尝试使用 shouldComponentUpdate() 进行调整，但无法正常工作。有没有人遇到过类似的问题？

标签： reactjs

解决方案

好的。让我背诵它。如我错了请纠正我。您有一个产品页面，显示有关特定产品的一些信息。我相信 URL 中的 id 指的是这个产品。下一部分是当您单击同一页面上的类似产品时，以显示有关您刚刚单击的产品的信息。因此，请相应地更改 URL。

例如，对于我从 ID 为 1 的产品页面单击 ID 为 2 的类似产品的场景，URL 应从 /product/1 => /product/2 更改。

接下来是您需要在 componentDidUpdate 中侦听此 ID 更改，如下所示。

 componentDidUpdate(prevProps) {
    console.log(this.props.match.params.id, prevProps.match.params.id);
    //Just to ensure id Change is caught here.

    if(this.props.match.params.id !== prevProps.match.params.id) {
         // Make the fetch Call for the product.
    }
 }

比较 ID 本身比比较对象更有效，并且花费的时间要少得多。

推荐阅读