Tepki zamanlayıcısı açık: 00 (durum güncellenmiyor)

Question

React işlevinde temel bir zamanlayıcı var sayıyorum. Tek sorun, 'saniye' moduna geçmeden önce, zamanlayıcının saniye sayısı '00' a ulaştığında, bir saniye daha (ya da iki) asılı kalmasıdır. Sanırım eyalette hala rahat değilim, çünkü bazı ciddi hata ayıklama işlemleri yaptım ve problemi çözemiyorum.

Herhangi bir yardım çok takdir edilmektedir. Teşekkür ederim.

Kodu: fonksiyonu işlemek ve aşırı kene kullanarak Görüntülü mantığı (dakika ve saniye için sol dolgu sıfır) tutmak için

const Clock = React.createClass({ 

    getInitialState: function() { 
    return { currentCount: this.props.minutes, seconds: 10 }; 
    }, 

    startTimer: function() { 
    var intervalId = setInterval(this.timer, 1000); 
    this.setState({ intervalId: intervalId, minutes: this.state.currentCount - 1 }); 
    }, 

    pauseTimer: function() { 
    clearInterval(this.state.intervalId); 
    this.setState({ intervalId: this.props.minutes }); 
    }, 

    timer: function() { 
    var minutes = this.state.minutes; 
    var seconds = this.state.seconds; 

    if (seconds === '00') { 
     this.setState({ minutes: '0' + minutes - 1, seconds: 60 }); 
     this.setState({ currentCount: minutes + ':' + seconds }); 
     console.log('min: ' + minutes, 'sec: ' + seconds); 
    } else { 
     seconds--; 
     seconds = seconds < 10 ? '0' + seconds : seconds; 
     minutes = minutes < 10 ? '0' + minutes : minutes; 

     this.setState({ currentCount: minutes + ':' + seconds, minutes: this.state.minutes, seconds: seconds }); 
    } 
    }, 

    componentWillReceiveProps: function(nextProps) { 
    this.setState({ currentCount: nextProps.minutes }); 
    }, 

    render: function() { 
    return (
     <section> 
     <button onClick={this.startTimer}>Start</button> 
     <button onClick={this.pauseTimer}>Pause</button> 
     <br></br> 
     {this.state.currentCount} 
     </section> 
    ); 
    } 

}); 

module.exports = Clock; 

Answer 1

Try (sorun varsa zamanlayıcı işlevi deyimi içinde gibi görünüyor) dakika devredilir ve negatif sayım değeri göstermek kalmamak https://jsfiddle.net/reactjs/69z2wepo/

const Clock = React.createClass({ 

    getInitialState: function() { 
    return { minutes: this.props.minutes, seconds: this.props.seconds }; 
    }, 

    startTimer: function() { 
    var intervalId = setInterval(this.timer, 1000); 
    this.setState({ intervalId: intervalId }); 
    }, 

    pauseTimer: function() { 
    clearInterval(this.state.intervalId); 
    this.setState({ intervalId: this.props.minutes }); 
    }, 

    timer: function() { 
    var minutes = this.state.minutes; 
    var seconds = this.state.seconds; 

    if (seconds === 0) { 
     this.setState({ minutes: minutes - 1, seconds: 59 }); 
    } else { 
     seconds--; 
     this.setState({ minutes: minutes, seconds: seconds }); 
    } 
    }, 

    render: function() { 
    var s = this.state.seconds, 
     m = this.state.minutes; 
    return (
     <section> 
     <button onClick={this.startTimer}>Start</button> 
     <button onClick={this.pauseTimer}>Pause</button> 
     <br></br> 
     {m < 10 ? '0' + m : m}:{s < 10 ? '0' + s : s} 
     </section> 
    ); 
    } 

});