Question

我的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（）进行调整，但无法正常工作。有没有人遇到类似的问题？

Answer 1

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

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

接下来，您需要像下面那样在componentDidUpdate中监听URL中的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本身比比较对象有效，而且花费的时间要少得多。

ComponentDidUpdate导致移动设备上的滞后/崩溃，而不是台式机

1 个答案: