Problem dostępu stan wewnątrz setInterval w React.js

Question

Próbuję uzyskać dostęp do stanu komponentu wewnątrz setInterval w ten sposób, ale to nie działa:

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

Jednak gdybym umieścić funkcję zwrotną w sposób metoda oddzielnego komponentu, działa idealnie:

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

Każdy pomysł, dlaczego tak się dzieje? Wolałbym skorzystać z pierwszej opcji.

Answer 1

W pierwszym przykładzie, this jest poza zakresem, gdy wywoływana jest funkcja wywołania zwrotnego. Jednym ze sposobów rozwiązania tego problemu byłoby użyć zmiennej:

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

Problem z drugiej próbie jest to, że są natychmiast wywołując funkcję i przekazując wynik wykonywania funkcji do setInterval. należy przekazać samą funkcję, uważając, aby powiązać wartość this:

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

do wyjaśnienia, różnica między tym podejściem a drugi przykład pytaniem jest to, że tu, funkcja jest przekazywany do setInterval (ponieważ function.bind() zwraca funkcję).

Ponieważ używasz React.createClass, nie jest konieczne samodzielne zarządzanie wiązaniem this, z powodu autobind. Oznacza to, że można się po prostu przekazać funkcję i this będzie taka sama jak w oryginalnym kontekście:

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

Oczywiście, najbardziej odpowiednie podejście zależy od tego, czy wolisz używać anonimowej funkcji lub nie.

Answer 2

Należy wykonać procedurę obsługi przerw z poprawnym odniesieniem do this. Zastosowanie Reaguj na autobindingu dla cleasest rozwiązanie IMO:

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

Albo użyć bind jeśli chcesz anonimową funkcję:

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