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
      })
    }
  }

为什么它以分钟为单位递减计数，又如何以秒而不是数为单位递减？

请帮助我。这是我的Codepen

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”以转换为毫秒，现在您可以在render函数中进行此操作。然后，您只需将其修改为减少1000，而不是1

Pomodoro Clock计时器倒数秒不会开始

2 个答案: