javascript - 如何使用单个 useState 钩子实现反应倒计时？

Question

我正在尝试以 00:00 的格式进行倒计时。
我可以使用两个 useState 来实现它，但是我想使用单个 useState 来实现它

const [counter, setCounter] = React.useState([12, 0]);

React.useEffect(() => {
  const timer =
    counter > 0 &&
    setInterval(() => {
      setCounter([counter[0] - 1,Math.floor((counter[1] % 3600) / 60)]);
    }, 1000);
  return () => clearInterval(timer);
}, [counter]);

标签： javascriptreactjsreact-hooks

Answer 1

您应该将计数器存储为秒/分钟。当您渲染它时，您可以使用以下方式将其转换为例如 MM:SS 格式：

function secondsToMMSS(seconds) {
    var m = Math.floor(seconds / 60);
    var s = seconds % 60;

    return (m < 10 ? '0' : '') + m + ":" + ('0' + s).slice(-2);
}