ページを変更した後のアンマウントイベント

Question

スクロールでコンポーネントが表示されているかどうかを検出するコンポーネント内にコードがあります。

constructor(props) { 
     super(props); 
     this.handleScrollAnimation = this.handleScrollAnimation.bind(this); 
    } 

    componentDidMount() { 
    this.handleLoadAnimation(); 
    window.addEventListener('scroll', _.throttle(this.handleScrollAnimation.bind(this), 300)); 
    } 

    componentWillUnmount() { 
    window.removeEventListener('scroll', this.handleScrollAnimation.bind(this)); 
    } 

    handleLoadAnimation() { 
    const component = this.CalloutBoxes; 
    if (this.isElementInViewport(component)) { 
     component.classList.add('already-visible'); 
    } 
    } 

    handleScrollAnimation() { 
    const component = this.CalloutBoxes; 
    if (this.isElementInViewport(component)) { 
     component.classList.add('animated'); 
    } 
    } 

    isElementInViewport(el) { 
    const rect = el.getBoundingClientRect(); 

    return rect.bottom > 0 && 
     rect.right > 0 && 
     rect.left < (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */ && 
     rect.top < (window.innerHeight || document.documentElement.clientHeight); /* or $(window).height() */ 
    } 

私は別のページに移動すると、私はエラーを取得しCannot read property 'getBoundingClientRect' of null：このコードは次のようになります。私はこれをやめるために何をする必要があるのか​​分かりませんし、私が何をする必要があるかという考えを私に与えることができる何も見つけることができません。私は削除する必要がご覧

：私はページ上のコンポーネントを呼び出す場所です

render() { 
    const styles = { 
     image: { 
     backgroundImage: `url(${this.props.data.image})` 
     } 
    }; 

    return (
     <div 
     ref={c => { 
      this.CalloutBoxes = c; 
     }} 
     className="mini-nav-box" 
     > 
     <Link to={this.props.data.link}> 
      <div style={styles.image} className="mini-nav-box-bg"/> 
      <div className="mini-nav-box-content"> 
      <h3>{this.props.data.title}</h3> 
      <p>{this.props.data.copy}</p> 
      </div> 
     </Link> 
     </div> 
    ); 
    } 

：

{ calloutBoxes.map((box, index) => { 
    return <CalloutBoxes key={index} data={box}/>; 
})} 

EDIT

これは、コンポーネントの私のレンダリング機能です.bind（これ）は、毎回新しい関数を作成しているので、イベントリスナーを削除して追加します。今、私の削除イベントリスナーは、次のようになります。

window.removeEventListener('scroll', this.scrollFn); 

は、しかし、私はまだその上にこれらのコンポーネントのうちの1つを持っていない別のページに isElementInViewport機能発火の問題を持っています。

Answer 1

私は非常にばかげていたことに気づきました。

あなたがする必要があるのは、コンバーターにデバウンスを追加し、それを追加イベントリスナーから削除することです。

コンストラクタのコードは次のようになります。

constructor(props) { 
    super(props); 
    this.handleScroll = _.debounce(this.handleScrollAnimation.bind(this), 300); 
} 

その後componentDidMountは次のようになります。

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