React Ajax setInterval内存泄漏

Question

I looked and tried everything in the other questions. Still couldn't solve my memory leak. Here's the code. Essentially it gets a JSON file from a server and updates the table accordingly. It loops the AJAX call every 5 seconds.

Memory leak happens in this AJAX call. Any help would be great.

LoadDataTable: function(){

 $.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
},

Answer 1

Try moving your success and error functions out to a named function like this:

$.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)

Also, you might want to think about using the fetch API . Just be sure to include the polyfill for browser compatibility