番茄钟计时器倒计时不会在几秒钟内开始

Question

我正在开发我的第一个大型 React Project Pomodoro Clock，经过多次尝试，我已成功将我的显示转换为 mm:ss（分钟：秒）格式。

现在的问题是，当我点击 开始按钮 时，显示的时间是以分钟而不是秒为单位倒计时。我尝试配置代码但它不起作用。 这是使我的状态转换为 mm 的函数：ss

function millisToMinutesAndSeconds(millis) {
      var minutes = Math.floor(millis / 60000);
      var seconds = ((millis % 60000) / 1000).toFixed(0);
      return (seconds === 60 ? (minutes+1) + ":00" : minutes + ":" + (seconds < 10 ? "0" : "") + seconds);
    }   

这是我的开始按钮功能

handleStart() {
    if(this.state.started ===  false ){
      this.interval = setInterval(() => {
        this.setState(prevState => ({
           timer: prevState.timer - 1
        }));
      }, 1000)

      this.setState({
        started: true
      })
    }
  }

为什么它以分钟为单位倒计时，我怎样才能让它以秒为单位而不是以分钟为单位递减？

请帮助我。这是我的代码笔

https://codepen.io/bradrar1/pen/bmoYXv

Answer 1

“主要”问题是您将 timer 女巫每秒递减 1 分钟，您应该将 timer 更改为秒。

class Pomodoro extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      breakTime : 5,
      sessionTime : 25*60,
      timer : 25*60,
      started: false,
    }
    this.interval = null;


    this.handleClickBreakDecrement = this.handleClickBreakDecrement.bind(this);
    this.handleClickBreakIncrement = this.handleClickBreakIncrement.bind(this);
    this.handleClickSessionDecrement = this.handleClickSessionDecrement.bind(this);
    this.handleClickSessionIncrement = this.handleClickSessionIncrement.bind(this);
    this.handleStart = this.handleStart.bind(this);
    this.handleStop = this.handleStop.bind(this);
    this.handleReset = this.handleReset.bind(this);
  }

  handleClickBreakDecrement() {
    this.setState( prevState => ({
      breakTime : Math.max(prevState.breakTime - 1, 0)

    }));
  }

  handleClickBreakIncrement() {
    this.setState(prevState => ({
      breakTime : Math.min(prevState.breakTime + 1 , 10)
    }))
  }

  handleClickSessionDecrement() {
    this.setState(prevState => ({
      sessionTime : Math.max(prevState.sessionTime - 5, 0),
      timer : Math.max(prevState.sessionTime - 5, 0)
    }))
  }

  handleClickSessionIncrement() {
    this.setState(prevState => ({
      sessionTime : Math.min(prevState.sessionTime + 5, 50),
      timer : Math.min(prevState.sessionTime + 5, 50)
    }))
  }

  componentDidMount(){
   console.log('component mounted')
  }

  handleStart() {
    if(this.state.started ===  false ){
      this.interval = setInterval(() => {
        this.setState(prevState => ({
           timer: prevState.timer - 1
        }));
      }, 1000)

      this.setState({
        started: true
      })
    }
  }



 handleStop() {
    clearInterval(this.interval)
    this.setState({
      started: false,
    })
}

handleReset() {
  clearInterval(this.interval)
  this.setState({
    timer: this.state.sessionTime,
    started: false,
  })
}

  render() {

    let timer =   parseFloat(this.state.timer) 

    function millisToMinutesAndSeconds(sec) {
      var minutes = Math.floor(sec / 60);
      var seconds = (sec % 60).toFixed(0);
      return ( minutes + ":" + (seconds < 10 ? "0" : "") + seconds);
    }   

    return (
      <div >
          <div className="Pomodoro">
            <BreakTime breakTime={this.state.breakTime} breakDecrement={this.handleClickBreakDecrement} breakIncrement={this.handleClickBreakIncrement} />
            <SessionTime sessionTime={this.state.sessionTime} sessionDecrement={this.handleClickSessionDecrement} sessionIncrement={this.handleClickSessionIncrement}/>
          </div>
          <div className="Timer">
             <StartStop 
              timer={millisToMinutesAndSeconds(timer)} 
              startTimer={this.handleStart}
              stopTimer={this.handleStop}
              reset={this.handleReset}
              />
          </div>

      </div>
    );
  }
}







{/* PRESENTATION COMPONENTS ONLY*/}
const BreakTime = (props) => {

  return (
    <div className="breakTime">
      <h2 id="break-label"> Break Length </h2>
      <div id="button">
        <button id="break-decrement" onClick={props.breakDecrement}>
          -
        </button>
            <span id="break-length"> {props.breakTime} </span>
        <button id="break-increment" onClick={props.breakIncrement} >          
            +
        </button>
      </div>
    </div>
  )
}
{/* PRESENTATION COMPONENTS ONLY*/}

  {/* PRESENTATION COMPONENTS ONLY*/}
const SessionTime = (props) => {

  return (
    <div className="sessionTime">
    <h2 id="session-label"> Session Length </h2>
      <div id="button" >
      <button id="session-decrement" onClick={props.sessionDecrement} >
          -
      </button>
              <span id="session-length"> {props.sessionTime} </span>
      <button id="session-increment" onClick={props.sessionIncrement} >
          +
      </button>
      </div>
    </div>
  )
}
{/* PRESENTATION COMPONENTS ONLY*/}

{/* PRESENTATION COMPONENTS ONLY*/}
const StartStop = (props) => {
  return (
    <div>
      {/* Timer Label */}
      <div>
        <p id="timer-label"> Session</p>
        <p id="time-left">
           {props.timer}
        </p>
      </div>
        {/* Start, Stop and Reset Button*/}
        <div>
          <button id="start_stop" onClick={props.startTimer} >
              Start
          </button>

          <button id="start_stop" onClick={props.stopTimer} >
             Stop
          </button>
          <button id="reset" onClick={props.reset}>
              Reset
          </button>
        </div>
    </div>
  )
}
{/* PRESENTATION COMPONENTS ONLY*/}

ReactDOM.render(
  <Pomodoro />, 
document.getElementById('app')
);

Answer 2

This.state.timer 是分钟值。 修复它的一种方法是在构造函数中添加“* 60000”以转换为毫秒，您现在正在渲染函数中执行此操作。然后你只需要修改它以减少 1000 而不是 1