javascript - 设置倒数计时器 React JS

Question

我想设置倒数计时器从 00:00 开始并每 5 分钟重复一次。(例如:当时间为 00:05 时计时器倒计时 5 分钟直到 00:10，然后在 00:10 再次倒计时 5 分钟，并且等等)

现在这是我的代码:

  class App extends React.Component {
   constructor(props) {
   super(props);
    this.state = {
    minutes: 5,
    seconds: 0
  };
 }

 ...............

    componentDidMount() {
      this.getData();

      this.myInterval = setInterval(() => {
        const { seconds, minutes } = this.state
        if (seconds > 0) {
          this.setState(({ seconds }) => ({
            seconds: seconds - 1
          }))
        }
        if (seconds === 0) {
          if (minutes === 0) {
            clearInterval(this.myInterval)
          } else {
            this.setState(({ minutes }) => ({
              minutes: minutes - 1,
              seconds: 59
            }))
          }
        }
      }, 1000)

    }

 ...........

 return (
   <p>Countdown : {this.state.minutes}:{this.state.seconds < 10 ? `0${this.state.seconds}` : this.state.seconds} </p>

    );
  }
}

我应该更改或添加的地方使倒计时从 00:00 开始并每 5 分钟重复一次。谁能帮帮我？

Answer 1

使用 setInterval 会让我很头疼，因为在事件循环中添加越来越多的间隔后，每次重新渲染过程都会发生什么，我建议使用 setTimeout 使用 componentDidUpdate 方法更新状态并在最后清理或使用钩子(Hook)，这让生活更轻松

这里有一个带钩子(Hook)的解决方案

function App() {

  const [seconds, setSeconds] = useState(0)
  const [minutes, setMinutes] = useState(5)



  function updateTime() {
    if (minutes == 0 && seconds == 0) {
      //reset
      setSeconds(0);
      setMinutes(5);
    }
    else {
      if (seconds == 0) {
        setMinutes(minutes => minutes - 1);
        setSeconds(59);
      } else {
        setSeconds(seconds => seconds - 1);
      }
    }
  }



  useEffect(() => {
    // use set timeout and be confident because updateTime will cause rerender
    // rerender mean re call this effect => then it will be similar to how setinterval works
    // but with easy to understand logic
    const token = setTimeout(updateTime, 1000)

    return function cleanUp() {
      clearTimeout(token);
    }
  })




  return (<p>
    time: {minutes}:{seconds}
  </p>);
}