setInterval in einer React App

Question

Ich bin immer noch relativ neu bei React, aber ich habe mich langsam weiterentwickelt und bin auf etwas gestoßen, auf dem ich feststecke.

Ich versuche, eine "Timer" -Komponente in React zu bauen, und um ehrlich zu sein, weiß ich nicht, ob ich das richtig mache (oder effizient). In meinem Code unten, habe ich den Zustand eines Objekts { currentCount: 10 } zurückzukehren und liebäugelt wurden mit componentDidMount, componentWillUnmount und render und ich kann nur den Zustand bekommen zu „Countdown“ von 10 bis 9.

zweiteilige Frage : Was mache ich falsch? Und gibt es einen effizienteren Weg mit setTimeout (statt componentDidMount &)?

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; 

Answer 1

Ich sehe 4 Ausgaben mit Ihrem Code:

• In Ihrem Timer-Methode werden Sie immer Ihre aktuelle Anzahl auf 10
• Einstellung Sie versuchen, den Zustand in aktualisieren Methode machen
• Sie Verwenden Sie die setState Methode nicht, um den Status zu ändern
• Sie speichern Ihre intervalId nicht im Status

Lassen Sie uns versuchen, das zu beheben:

componentDidMount: function() { 
    var intervalId = setInterval(this.timer, 1000); 
    // store intervalId in the state so it can be accessed later: 
    this.setState({intervalId: intervalId}); 
}, 

componentWillUnmount: function() { 
    // use intervalId from the state to clear the interval 
    clearInterval(this.state.intervalId); 
}, 

timer: function() { 
    // setState method is used to update the state 
    this.setState({ currentCount: this.state.currentCount -1 }); 
}, 

render: function() { 
    // You do not need to decrease the value here 
    return (
     <section> 
     {this.state.currentCount} 
     </section> 
    ); 
} 

Diese in einem Timer führen würde, die -N von 10 abnimmt. Wenn Sie Timer möchten, die auf 0 abnimmt, können Sie leicht modifizierte Version verwenden:

timer: function() { 
    var newCount = this.state.currentCount - 1; 
    if(newCount >= 0) { 
     this.setState({ currentCount: newCount }); 
    } else { 
     clearInterval(this.state.intervalId); 
    } 
}, 

Answer 2

Aktualisiert 10-Sekunden-Countdown mit class Clock extends Component

import React, { Component } from 'react'; 

class Clock extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {currentCount: 10} 
    } 
    timer() { 
    this.setState({ 
     currentCount: this.state.currentCount - 1 
    }) 
    if(this.state.currentCount < 1) { 
     clearInterval(this.intervalId); 
    } 
    } 
    componentDidMount() { 
    this.intervalId = setInterval(this.timer.bind(this), 1000); 
    } 
    componentWillUnmount(){ 
    clearInterval(this.intervalId); 
    } 
    render() { 
    return(
     <div>{this.state.currentCount}</div> 
    ); 
    } 
} 

module.exports = Clock;