时间戳

首页 > 解决方案 > 转到不同的 url 后从 componentDidMount() 停止函数

reactjs - 转到不同的 url 后从 componentDidMount() 停止函数

问题描述

我在这样的有状态组件中调用了一个函数

  handleScroll = (event) => {
  if (window.scrollY < 201){
    var pxScrolled = window.scrollY;
    var opValue = (200 - pxScrolled)*0.005;
    document.getElementById("blogpost").firstChild.style.opacity = opValue;
  }
  if (window.scrollY > 201){
    document.getElementById("blogpost").firstChild.style.opacity = "0";
  }
}

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

但是现在当我更改 url 并转到另一个页面时，该功能仍在运行，我得到了

TypeError：无法读取 null 的属性“firstChild”

我如何将功能保留在一个组件中？

如果您需要我将提供的其他信息，不确定这是否足够信息

标签： reactjs

解决方案

componentWillUnmount您需要在组件的方法中清理并删除事件侦听器。当组件即将从页面中删除时，这将取消滚动事件侦听器——这似乎会在 URL 更改时发生。

例如：

componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
}

一般来说，方法中添加的所有事件侦听器componentDidMount都应在方法中删除componentWillUnmount。

推荐阅读