欢迎来到React!你非常接近了。setTimeout和setInterval非常相似，因此你可以简单地使用setInterval。不需要while()循环!看看这个工作沙箱，我在其中创建了一个简单的React钩子，你可以在App.js中使用它
https://codesandbox.io/s/recursing-hooks-jc6w3v
代码陷入无限循环的原因是startTime()函数具有stale props。具体来说，second变量在本例中始终为0，因为当您在组件挂载时定义startTime()时，second为0。该函数不跟踪它的增量。
要解决此问题，请不要：
setSecond(second + 1);
尝试使用：
setSecond((s) => s += 1);
编辑 * 有很多关于React Stale Props的好文章，这里有一篇很有帮助：https://css-tricks.com/dealing-with-stale-props-and-states-in-reacts-functional-components/
编辑**有关确切问题的其他内联示例：

• • 我会做两个改变：**

1.在while（）循环中使用setInterval而不是setTimeout。
1.创建一个处理定时器逻辑的useTimer钩子。

• • 应用程序js**

import "./styles.css";
import useTimer from "./useTimer";

export default function App() {
  const [setTime, startTime, stopTime, hour, minute, second] = useTimer();
  return (
    <div>
      <div className="d-flex justify-content-center">
        <button onClick={() => setTime("reset")}>RESET</button>
        <button onClick={startTime}>START</button>
        <button onClick={stopTime}>STOP</button>
      </div>
      <br />
      <div>
        Hour: {hour} <br />
        Minute: {minute} <br />
        Second: {second} <br />
      </div>
    </div>
  );
}

• • 使用计时器. js**

import { useState } from "react";

const useTimer = () => {
  const [hour, setHour] = useState(4);
  const [minute, setMinute] = useState(8);
  const [second, setSecond] = useState(12);
  const [timer, setTimer] = useState();

  // methods
  const clearTimer = () => clearInterval(timer);

  const setTime = (value) => {
    if (value === "reset") {
      setHour(0);
      setMinute(0);
      setSecond(0);
    }
  };

  const startTime = () => {
    if (timer) clearTimer();
    const newInterval = setInterval(() => {
      setSecond((s) => (s += 1));
    }, 1000);
    setTimer(newInterval);
  };

  const stopTime = () => clearTimer();

  return [setTime, startTime, stopTime, hour, minute, second];
};

export default useTimer;