我正在按照 useState 和 useRef 钩子的初学者教程，尝试在 React 中实现一个简单的计时器。

我正在使用 interval 变量来存储 setInterval() 的值

单击开始按钮时，我能够正确地将间隔值记录到控制台。 但是，单击停止按钮时， interval.current 在控制台中记录为 undefined 。因此， stopTimer() 无法按预期运行。

为什么 interval.current 会在 startTimer 中明确设置（并记录在那里）时打印 undefined？我这里遗漏了什么？

import React, { useState, useRef } from 'react';

const pad = (time) => {
  return time.toString().padStart(2, "0");
};


function App() {
  const [title, setTitle] = useState("Pomodoro!");
  const [timeLeft, setTimeLeft] = useState(5);
  const interval = useRef(null);

  const startTimer = () => {
    interval.current = setInterval(() => {
      setTimeLeft((timeLeft) => {
        if (timeLeft >= 1) {
          return timeLeft - 1;
        }
        return 0;
      });
    }, 1000);
    console.log(interval.current, " :in start");
  }

  const stopTimer = (interval) => {
    console.log("in stop: ", interval.current);
    clearInterval(interval.current);
  }

  const resetTimer = () => { }

  const minutes = pad(Math.floor(timeLeft / 60));
  const seconds = pad((timeLeft - minutes * 60));


  return (

    <div>
      <div>{title}</div>
      <div>
        <span>{minutes}</span>
        <span>:</span>
        <span>{seconds}</span>
      </div>
      <div>
        <button onClick={startTimer}>Start</button>
        <button onClick={stopTimer}>Stop</button>
        <button onClick={resetTimer}>Reset</button>
      </div>
    </div>
  );
}

export default App;

控制台中的输出

6 " :in start" in stop: undefined

谢谢