Ich bin noch ziemlich neu bei React, aber ich habe mich langsam weiterentwickelt und bin auf etwas gestoßen, an dem ich festgefahren bin.
Ich versuche, eine "Timer" -Komponente in React zu erstellen, und um ehrlich zu sein, weiß ich nicht, ob ich das richtig (oder effizient) mache. In meinem Code unten habe ich den Status so festgelegt, dass er ein Objekt { currentCount: 10 }
zurückgibt und mit dem er gespielt componentDidMount
hat componentWillUnmount
, render
und ich kann den Status nur dazu bringen, von 10 auf 9 "herunterzuzählen".
Zweiteilige Frage: Was mache ich falsch? Und gibt es eine effizientere Möglichkeit, setTimeout zu verwenden (anstatt componentDidMount
& componentWillUnmount
)?
Vielen Dank im Voraus.
import React from 'react';
var Clock = React.createClass({
getInitialState: function() {
return { currentCount: 10 };
},
componentDidMount: function() {
this.countdown = setInterval(this.timer, 1000);
},
componentWillUnmount: function() {
clearInterval(this.countdown);
},
timer: function() {
this.setState({ currentCount: 10 });
},
render: function() {
var displayCount = this.state.currentCount--;
return (
<section>
{displayCount}
</section>
);
}
});
module.exports = Clock;
bind(this)
wird nicht mehr benötigt, reagieren macht das jetzt alleine.this.timer.bind(this)
als this.timer allein hat nicht funktioniertclass Clock extends Component
automatisch, bindet sie jedoch nicht automatisch. Es hängt also davon ab, wie Sie Ihre Komponenten erstellen, ob Sie binden müssen.Antworten:
Ich sehe 4 Probleme mit Ihrem Code:
setState
Methode, um den Status tatsächlich zu ändernVersuchen wir das zu beheben:
Dies würde zu einem Timer führen, der von 10 auf -N abnimmt. Wenn Sie einen Timer wünschen, der auf 0 sinkt, können Sie eine leicht modifizierte Version verwenden:
quelle
componentDidMount
ist der richtige Ort, um die clientseitigen Ereignisse auszulösen, also würde ich es verwenden, um den Countdown einzuleiten. Über welche andere Methode denken Sie beim Initialisieren nach?Aktualisierter 10-Sekunden-Countdown mit
class Clock extends Component
quelle
Aktualisierter 10-Sekunden-Countdown mithilfe von Hooks (ein neuer Funktionsvorschlag, mit dem Sie Status- und andere React-Funktionen verwenden können, ohne eine Klasse zu schreiben. Sie befinden sich derzeit in React v16.7.0-alpha).
quelle
Danke @dotnetom, @ greg-herbowicz
Wenn "this.state is undefined" zurückgegeben wird, binden Sie die Timer-Funktion:
quelle
Wenn jemand nach einem React Hook-Ansatz zur Implementierung von setInterval sucht. Dan Abramov hat in seinem Blog darüber gesprochen . Probieren Sie es aus, wenn Sie eine gute Lektüre über das Thema einschließlich eines Klassenansatzes wünschen. Grundsätzlich ist der Code ein benutzerdefinierter Hook, der setInterval deklarativ macht.
Veröffentlichen Sie der Einfachheit halber auch den CodeSandbox-Link: https://codesandbox.io/s/105x531vkq
quelle
Aktualisieren des Status jede Sekunde in der Reaktionsklasse. Beachten Sie, dass my index.js eine Funktion übergibt, die die aktuelle Zeit zurückgibt.
quelle