Problema accesso Stato all'interno setInterval in React.js

Question

Sto cercando di accedere allo stato di un componente all'interno di un setInterval in questo modo, ma non sta funzionando:

componentDidMount: function() { 
    setInterval(function() { 
     console.log(this.state); 
    }, 3000); 
} 

Tuttavia, se metto la funzione di callback in un metodo componente separato, funziona perfettamente:

displayState: function() { 
    console.log(this.state) 
} 
componentDidMount: function() { 
    setInterval(this.displayState(), 3000); 
} 

Qualsiasi idea del perché sta succedendo questo? Preferirei usare la prima opzione.

Answer 1

Nel primo esempio, this non è compreso nell'ambito della funzione di richiamata. Un modo per risolvere questo problema sarebbe quella di utilizzare una variabile:

componentDidMount: function() { 
    var self = this; 
    setInterval(function() { 
     console.log(self.state); 
    }, 3000); 
} 

Il problema con il secondo tentativo è che si sta chiamando immediatamente la funzione e passando il risultato di esecuzione della funzione di setInterval. Si dovrebbe passare la funzione stessa, avendo cura di associare il valore di this:

componentDidMount: function() { 
    setInterval(this.displayState.bind(this), 3000); 
} 

Per chiarire, la differenza fra questo approccio e il secondo esempio nella tua domanda è che qui, una funzioneviene passato a setInterval (perché function.bind() restituisce una funzione).

Come si utilizza React.createClass, non è necessario per gestire il legame di this te stesso, a causa di autobind. Questo significa che si può solo passare la funzione stessa e this sarà lo stesso come nel contesto originale:

componentDidMount: function() { 
    setInterval(this.displayState, 3000); 
} 

Naturalmente, l'approccio più adatto dipende dal fatto che si preferisce utilizzare una funzione anonima o no.

Answer 2

È necessario eseguire il gestore di intervalli con il riferimento corretto a this. Usa di autobinding Reagire per la soluzione cleasest IMO:

displayState: function() { 
    console.log(this.state) 
}, 
componentDidMount: function() { 
    setInterval(this.displayState, 3000) 
} 

Oppure usare bind se si desidera una funzione anonima:

componentDidMount: function() { 
    setInterval(function() { 
     console.log(this.state) 
    }.bind(this), 3000) 
}