无法让我的简单反应计时器工作而不会导致无限循环

Question

我正在尝试在我的 React 应用程序中创建一个简单的计时器，它从 0 计数到 10，然后停止。但是如果不陷入无限循环我就无法让它工作。

import React, { useState, useEffect } from "react";

const Countdown = () => {
  const [countdown, setCountdown] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCountdown(countdown + 1);
    }, 1000);
    if (countdown >= 10) {
      return () => clearInterval(interval);
    }
  }, [countdown]);

  return <div>{countdown}</div>;
};

export default Countdown;

Answer 1

如果 setInterval 大于 10，您必须停止使用 setInterval。但是如果间隔大于 10 但 setCountdown 仍在设置 countdown.

，则您正在清除间隔

但你应该使用 setTimeout 而不是 setInterval 并将 countdown 初始化为 1

CODESANDBOX

import React, { useState, useEffect } from "react";

const Countdown = () => {
  const [countdown, setCountdown] = useState(1);

  useEffect(() => {
    let timeout;
    if (countdown < 10) {
      timeout = setTimeout(() => {
        setCountdown(countdown + 1);
      }, 1000);
    }

    return () => clearTimeout(timeout);
  }, [countdown]);

  return <div>{countdown}</div>;
};

export default Countdown;

Answer 2

// here is the alternative to count the process time.
console.time('looper');
for(let a=0; a<100000; a++){}
console.timeEnd('looper');

无法让我的简单反应计时器工作而不会导致无限循环

Can't get my simple react timer to work without causing endless loops

javascript

timer

reactjs