componentWillUnmount＆Warning：setState（...）：error

Question

このコンポーネントから離れてナビゲートすると問題が発生します。このエラーが発生します：warning.js：36 Warning：setState（...） ： "マウントされたコンポーネントまたはマウントされているコンポーネントのみをアップデートできます。これは通常、アンマウントされたコンポーネントに対してsetState（）を呼び出したことを意味します。今私は、コンポーネントがDOMからアンマウントされる直前に呼び出されます」と述べcomponentWillUnmountのためのドキュメント上で見てきました。

をこの方法で必要なクリーンアップを実行し、そのようなタイマーを無効にするか、任意のDOM要素をクリーンアップするよう

componentDidMountで作成されたものです。

問題は私がそれを行う方法を知らないということです。私は他のスタックオーバーフローの例を見てきましたが、私はそれらを理解していないし、それを理解することはできません。私がそれをする方法を理解するのに十分な例はないようです。私はライフサイクルを理解していますが、私はそれをどのように実行するのか分かりません。ここで

は私のコードです：

import React from 'react'; 
import jQuery from 'jquery'; 
import $ from 'jquery'; 

import ProjectsHeaderLinks from "./ProjectsHeaderLinks.jsx"; 

export default class ProjectsHeader extends React.Component { 

    constructor() { 
     super() 
     this.state = { 
      class: "not-sticky-div", 
      class2: "hidden-span", 
      class3: "false" 
     } 
    } 



    componentDidMount() { 
     this.scrollTop(); 

    } 

    componentWillUnmount(){ 
     this.scrollTop = null; 
     console.log("unmounted"); 
    } 


    scrollTop(){ 
     var that = this; 
     let head = $(".header"); 
     let stick = "sticky"; 
     let projHead = document.getElementById("projHead"); 
    $(window).scroll(function() { 
     $(window).scrollTop() > 400 
      ? head.addClass(stick) 
      : head.removeClass(stick); 
     let newValue = projHead.classList.value.split(' ', 2); 
     for (var i = 0; i < newValue.length; i++) { 
      newValue[i] === "sticky" 
       ? that.setState({class: "sticky-div", class2: "visible-span", class3: "true"}) 
       : that.setState({class: "not-sticky-div", class2: "hidden-span", class3: "true"}); 
      } 
     }) 
    } 



    render() { 
     return (
      <div id="projHead" className="header"> 
       <div className={this.state.class}> 
       {this.state.class === "not-sticky-div" 
       ? <div>"This is My Projects Page" --Lonnie McGill</div> 
       : <div> <ProjectsHeaderLinks/> </div> 
      } 
       </div> 
      </div> 
     ) 
    } 
} 

Answer 1

問題を解決するために置く：

componentWillUnmount(){ 
    $(window).unbind("scroll"); 
}