2016-10-26 7 views
0

私は他の質問のすべてを見て試しました。それでも私のメモリリークは解決できませんでした。ここにコードがあります。基本的に、サーバーからJSONファイルを取得し、それに応じてテーブルを更新します。 5秒ごとにAJAXコールをループします。リアクションAjax setIntervalメモリリーク

このAJAX呼び出しではメモリリークが発生します。 助けがあれば助かります。

LoadDataTable:機能(){

$.ajax({ 
    url: "***************************.json", 
    dataType: 'json', 
    cache: false, 
    timeout: 5000, 
    success: function(data) { 
    this.setState({temp1:data[2].field3}), 
    this.setState({temp2:data[2].field5}), 
    this.setState({temp3:data[2].field25}), 
    this.setState({temp4:data[2].field26}); 

    if(data[2].field3 > 9 || data[2].field5 >9||data[2].field5>9 ||data[2].field26>9){ 
     document.location.href='#/' 
    } 
    else{ 
     //console.log("Stopped playing"); 
    } 
    setTimeout(this.LoadDataTable, 5000); 


}.bind(this), 
    error: function(request, status, err) { 

    //request.abort(); 
    console.log(request); 
    setTimeout(this.LoadDataTable, 5000); 

    }.bind(this), 

}) 

}, 
componentDidMount: function() { 
    this.LoadDataTable(); 
    //this.setInterval(this.LoadDataTable, 100);// Call a method on the mixin 
}, 
+0

これは答えではありませんが、setStateを何度も呼び出す必要はありません。一度オブジェクト全体を渡します。 –

+0

私は、一般的に言えば、あなたはあなたのリアクションコンポーネントがこれらのAJAXリクエストを作成する責任があります。理想的にはRedux(または何らかの外部状態メカニズム)を使ってリクエストを作成すると、アプリケーションは新しいデータを 'prop'としてコンポーネントに渡します。このアーキテクチャーを使用することによる副作用は、メモリリークを回避し、Reactの "ベストプラクティス"に沿ったものになります。 – arthurakay

答えて

0

は、このような名前の関数にあなたの成功とエラーの機能を外に移動してみてください。また

$.ajax({ 
    url: "***************************.json", 
    dataType: 'json', 
    cache: false, 
    timeout: 5000, 
    success: this.successTimeout, 
    error: this.errorTimeout, 
}) 

componentDidMount: function() { 
    this.LoadDataTable(); 
    //this.setInterval(this.LoadDataTable, 100);// Call a method on the mixin 
}, 

successTimeout(data) { 
    this.setState({temp1:data[2].field3}), 
    this.setState({temp2:data[2].field5}), 
    this.setState({temp3:data[2].field25}), 
    this.setState({temp4:data[2].field26}); 

    if(data[2].field3 > 9 || data[2].field5 >9||data[2].field5>9 ||data[2].field26>9){ 
    document.location.href='#/' 
    } 
    else{ 
    //console.log("Stopped playing"); 
    } 

    setTimeout(this.LoadDataTable, 5000); 
}.bind(this), 

errorTimeout(request, status, err) { 
    //request.abort(); 
    console.log(request); 
    setTimeout(this.LoadDataTable, 5000); 
}.bind(this) 

、あなたがfetch APIを使用して考えることをお勧めします。ブラウザの互換性を確認するにはinclude the polyfillにしてください

関連する問題