在React JS中，我正在尝试创建一个倒数计时器，但无法将第一秒变成一整秒

Question

I'm using setInterval with 1000ms intervals inside componentDidMount which means that depending on when the user hits the submit button to enter the time to count down from, the first second on the countdown could take anywhere from 1ms to 1000ms. Here is the code in question:

minusOne() {
  if(this.state.time > 0){
    this.setState({time: this.state.time -1});
  }
}

componentDidMount(){
  setInterval(() => this.minusOne(), 1000);
}

Any ideas on how to get that first second to always take 1000ms? Thanks

Answer 1

Just launch your interval on button hit instead of componentDidMount .

onSubmit() { 
  ...
  // remove any previous interval (noop for undefined handle)
  clearInterval(this.state.countdownIntervalHandle); 
  this.setState({countdownIntervalHandle: setInterval(...)});
}

Don't forget to add clearInterval to componentWillUnmount if necessary.

Answer 2

Use setTimeout to force the countdown at 1000ms.

componentDidMount(){
   setTimeout( setInterval( () => this.minusOne(), 1000), 1000);
};

wonkledge