React.jsで、componentWillUnmountを使用してイベントリスナーを削除すると、イベントリスナーが削除されるようにするにはどうすればよいですか？

Question

コンポーネントがアンマウントされた後、ウィンドウのサイズを変更するとエラーが発生します。私はwindow.removeEventListenerが呼び出されていることを知っていますが、決して呼び出されないかのように動作しています。エラーメッセージ：

warning.js：36警告：setState（...）：マウントされたコンポーネントまたは マウントコンポーネントのみを更新できます。これは、通常、アンマウントされたコンポーネント でsetState（）を呼び出したことを意味します。これはノーオペレーションです。 HeaderMainコンポーネントのコードを確認してください。

Reactドキュメントのコード例を使って試してみましたが、これは私のクラスがやっていたのと同じことです。 https://facebook.github.io/react/tips/dom-event-listeners.htmlから：

import React from "react"; 

var HeaderMain = React.createClass({ 
    getInitialState: function() { 
    return {windowWidth: window.innerWidth}; 
    }, 

    handleResize: function(e) { 
    this.setState({windowWidth: window.innerWidth}); 
    }, 

    componentDidMount: function() { 
    window.addEventListener('resize', this.handleResize); 
    }, 

    componentWillUnmount: function() { 
    window.removeEventListener('resize', this.handleResize); 
    }, 

    render: function() { 
    return <div>Current window width: {this.state.windowWidth}</div>; 
    } 
}); 

module.exports = HeaderMain; 

私はbind()をいじり試みた、私はES6でそれを試してみた、とReact.jsの異なるバージョンを試してみました。私はエラーを取り除くことはできません。

イベントリスナーが削除されるようにするにはどうすればよいですか？

handleResize: function(e) { 
    this.setState({windowWidth: window.innerWidth} , function(){ 
    console.log("windowWidth" , windowWidth); 
    }); 
    } 

変更ルートやcomponentWillUnmount関数を呼び出した後、あなたのconsoleを開き、ウィンドウのサイズを変更する任意のアクションを使用してテストして：

Answer 1

私はバインディングと関係があると分かりました。 .bind（this）を呼び出すと、目的のスコープの新しい関数が返されるので、追加したと思ったのと同じ関数を登録解除していませんでした。

また、私はES6 + React v15.3.1（最新）では、自動バインディングが起こっていない（私はそれが想定されていたと考えていた）ことを発見しました。私はちょうどバインドされた関数への参照を格納し、それを再利用しました。

import React from "react"; 

export default class HeaderMain extends React.Component { 

    boundFunc = this.handleResize.bind(this); 

    constructor() 
    { 
    super(); 

    this.state = {height:window.innerHeight + "px"}; 
    } 

    handleResize(e) 
    { 
    this.setState({height:window.innerHeight + "px"}); 
    } 

    componentDidMount() 
    { 
    window.addEventListener('resize', this.boundFunc); 
    } 

    componentWillUnmount() 
    { 
    window.removeEventListener('resize', this.boundFunc); 
    } 

    render() { 

    return (
     <header class="header_main" style={{height:this.state.height}}> 
     Example Header 
     </header> 
    ); 
    } 
} 

Answer 2

は、あなたがこのようconsole.log()handleresizeで機能をテストすることができ、この警告について心配しないで。