Unter Berücksichtigung dieses Codes:
var Component = React.createClass({
getInitialState: function () {
return {position: 0};
},
componentDidMount: function () {
setTimeout(this.setState({position: 1}), 3000);
},
render: function () {
return (
<div className="component">
{this.state.position}
</div>
);
}
});
ReactDOM.render(
<Component />,
document.getElementById('main')
);
Soll sich der Zustand nicht erst nach 3 Sekunden ändern? Es ändert sich sofort.
Mein Hauptziel hier ist es, den Status alle 3 Sekunden (mit setInterval()
) zu ändern , aber da es nicht funktioniert hat, habe ich es versucht setTimeout()
, was auch nicht funktioniert. Irgendwelche Lichter dazu? Vielen Dank!
javascript
reactjs
jbarradas
quelle
quelle
foo(bar())
dann haben,bar
wird zuerst ausgeführt und sein Rückgabewert wird an übergebenfoo
.foo()
hier genaubar
nach gewünschtem Timeout auszuführen . Oder irre ich mich völlig und es wird sofort ausgeführt und gibt den Wert erst nach der gewünschten Zeit zurück?bar
, nicht aufrufen und seinen Rückgabewert übergeben. Haben Sie erwartet, dass sich das Verhaltenfoo(bar())
ändert, je nachdem, wasfoo
gerade getan wird? Das wäre wirklich seltsam.Antworten:
Machen
Andernfalls übergeben Sie das Ergebnis von
setState
ansetTimeout
.Sie können auch Pfeilfunktionen verwenden, um die Verwendung des Schlüsselworts 'this' zu vermeiden: Do.
Andernfalls übergeben Sie das Ergebnis von
setState
ansetTimeout
.Sie können auch ES6-Pfeilfunktionen verwenden, um die Verwendung von
this
Schlüsselwörtern zu vermeiden :quelle
setTimeout(() => {this.setState({ position: 1 })}, 3000)
Pfeilfunktionen bevorzugen: @PositiveGuy Sie sind sich nicht sicher, ob Sie dies selbst recherchiert haben, seit diese Frage gestellt wurde, aber falls Sie dies nicht getan haben: Daniels ursprüngliches Beispiel muss.bind(this)
denthis
Kontext aufsetState
- ansonsten beschränken ,this
verweist automatisch auf den Kontext, in dem es aufgerufen wird (in diesem Fall wird der anonyme Kontextfunction
übergebensetTimeout
). ES6- Pfeilfunktionen sind jedoch lexikalisch begrenzt - sie beschränken sichthis
auf den Kontext, in dem sie aufgerufen werden.Dies würde auch funktionieren, da die ES6-Pfeilfunktion den Kontext von nicht ändert
this
.quelle
this
.Jedes Mal, wenn wir ein Timeout erstellen, sollten wir es auf componentWillUnmount löschen, falls es noch nicht ausgelöst wurde.
quelle
Ich weiß, dass dies etwas alt ist, aber es ist wichtig zu beachten, dass React empfiehlt, das Intervall zu löschen, in dem die Komponente nicht bereitgestellt wird: https://reactjs.org/docs/state-and-lifecycle.html
Deshalb möchte ich diese Antwort zu dieser Diskussion hinzufügen:
quelle
setState
wird aufgrund der Klammer sofort aufgerufen! Wickeln Sie es in eine anonyme Funktion ein und rufen Sie es dann auf:quelle
Sie haben nicht gesagt, wer setTimeout aufgerufen hat
Hier erfahren Sie, wie Sie Timeout aufrufen, ohne zusätzliche Funktionen aufzurufen.
1. Sie können dies tun, ohne zusätzliche Funktionen auszuführen.
Verwendet function.prototype.bind ()
setTimeout nimmt den Speicherort der Funktion und hält sie im Kontext.
2. Eine andere Möglichkeit, dasselbe zu tun, indem Sie noch weniger Code schreiben.
Verwendet wahrscheinlich irgendwann die gleiche Bindemethode
Das setTimeout nimmt nur den Speicherort der Funktion ein und die Funktion hat bereits den Kontext? Wie auch immer, es funktioniert!
HINWEIS: Diese funktionieren mit allen Funktionen, die Sie in js verwenden.
quelle
Ihr Code scope (
this
) wird Ihrwindow
Objekt sein, nicht Ihre Reaktionskomponente, und deshalbsetTimeout(this.setState({position: 1}), 3000)
stürzt er auf diese Weise ab.Das kommt von Javascript nicht React, es ist js Closure
Gehen Sie folgendermaßen vor, um Ihren aktuellen Reaktionskomponentenbereich zu binden:
Oder wenn Ihr Browser es6 unterstützt oder Ihre Projekte das Kompilieren von es6 zu es5 unterstützen, versuchen Sie es auch mit der Pfeilfunktion, da die Pfeilfunktion dieses Problem beheben soll:
quelle
Es gibt drei Möglichkeiten, auf den Bereich innerhalb der Funktion 'setTimeout' zuzugreifen
Zuerst,
Zweitens ist die Verwendung der ES6-Pfeilfunktion, da die Pfeilfunktion selbst keinen Gültigkeitsbereich hatte (dies)
Der dritte besteht darin, den Bereich innerhalb der Funktion zu binden
quelle
Sie haben einen Syntaxdeklarationsfehler gemacht. Verwenden Sie die richtige setTimeout-Deklaration
quelle