リアクションタイマーが掛かっています：00（状態が更新されていません）

Question

リアクタの基本タイマーが正しくカウントダウンしています。唯一の問題は、タイマーの秒が '00'に達してから '59'に切り替わるときに余分な秒（または2）の間停止し続けることです。深刻な時間をかけてデバッグをしているため、問題を把握できないため、私はまだ状態に慣れていないと思います。

ご迷惑をおかけして申し訳ありません。ありがとうございました。

コード：（問題はタイマー機能ではif文の内側にあると思われる）

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

レンダリング機能で（分、秒に左パディングゼロ）あなたの表示ロジックを維持しようとオーバーダニ例えば59秒の代わりに60と分、：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> 
    ); 
    } 

});