React Ajax setInterval 메모리 누출

나는 다른 질문에서 모든 것을보고 시도했다. 아직도 내 메모리 누출을 해결할 수 없었다. 여기에 코드가 있습니다. 기본적으로 서버에서 JSON 파일을 가져 와서 그에 따라 테이블을 업데이트합니다. 5 초마다 AJAX 호출을 반복합니다.React 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 
},

출처

2016-10-26 user3221162

이것은 답변이 아니지만 setState를 여러 번 호출 할 필요가 없습니다. 한 번 전체 개체를 전달하십시오. –

일반적으로 말하자면, 귀하는 귀하의 React 구성 요소가 이러한 AJAX 요청을 담당해야합니다. 이상적으로 Redux (또는 일부 외부 상태 메커니즘)를 사용하여 요청을하면 응용 프로그램은 새 데이터를 구성 요소에 'prop'로 전달합니다. 이 아키텍처를 사용하는 부작용은 발생하는 메모리 누수를 피할 수 있다는 것입니다. 또한 "우수 사례"와 더 비슷합니다. – arthurakay

은 다음과 같이 명명 된 기능으로 여러분의 성공 및 오류 기능을 옮겨보십시오 : 또한

$.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을 반드시 확인하십시오.

출처

2016-10-26 14:27:17

React Ajax setInterval 메모리 누출

답변

관련 문제