Update reagieren Zustand nach einem bestimmten Intervall

Question

constructor(){ 
    super(); 
    this.state={ 
     data : [1,2,3,4,1,2,3,4,1,3,1,4,12,2,3,2] 
    }; 

} 
componentDidMount(){setInterval(this.updateCanvas(),5000);} 

updateCanvas() { 
    console.log(this.props.newData); 
    let data = this.state.data.slice(); 
    let length = data.length; 
    console.log(length); 
    data.push(20); 
    this.setState({data:data},()=>{console.log(this.state.data);}); 
} 

Ich versuche, einen neuen Wert auf den Zustand alle 5s zu drücken, aber der Zustand ändert sich sofort. Wie kann ich den gewünschten Effekt erzielen?

Answer 1

Der Zustand ändert sich sofort, weil Sie die Callback-Methode aufgerufen wird Sie sofort auf dieser Linie zu setInterval vorbei Klammer ihm hinzufügen:

setInterval(this.updateCanvas(),5000); 
//---------------------------^ 
// Adding these to function will invoke it 

Die Lösung ist die Referenz auf die Funktion ohne die Klammer passieren (und sie rufen es nicht sofort auf)

setInterval(this.updateCanvas,5000); 

Answer 2

Entfernen Sie diese Klammer von this.updateCanvas(). Ie setInterval (this.updateCanvas, 5000);}

Die erste wird die Funktion sofort, während das zweite leitet sie in als Funktion für die eingestellte Zeit

Answer 3

Warum nicht funktioniert auszuführen?

Es gibt zwei Probleme:

1. Sie benötigen eine Funktion setInterval passieren. Der setInterval method übernimmt eine Funktion als 1. Parameter. Wenn Sie setInterval(this.updateCanvas(),5000); verwenden, übergeben Sie den zurückgegebenen Wert der aufgerufenen Methode this.updateCanvas(). Da die Methode nichts zurückgibt (undefiniert), erhalten Sie window.setInterval(undefined, 5000);.

2. Sie müssen diese Funktion an die this der Komponenteninstanz binden. Da die updateCanvas Verfahren this verwendet beispiels this.setState(),

Bindung updateCanvas zu this und Aufrufen in setInterval:

• Pass setInveral ein Pfeil Funktion, und rufen updateCanvas innen:

  componentDidMount(){ 
      setInterval(() => this.updateCanvas(),5000); 
  } 
  

Oder

• Bind das Verfahren auf die Komponenteninstanz this:

  constructor(){ 
      super(); 
      this.state={ 
       data : [1,2,3,4,1,2,3,4,1,3,1,4,12,2,3,2] 
      }; 
  
      this.updateCanvas = this.updateCanvas.bind(this); // bind the method to this 
  } 
  
  componentDidMount(){ 
      setInterval(this.updateCanvas,5000); 
  }