reactjs - 与 setInterval/clearInterval [react-typescript] 一起使用时的 useRef 类型

Question

我正在设置一个 useRef 对象来保存一个 NodeJS.Timeout 组件，即 setInterval() 的返回类型。当我稍后在 clearInterval 中使用它时，代码中的两个 intervalRef.current 实例都会出现错误（如下所示）。

设置它的正确方法是什么，以便我可以在按钮 onClick 事件中调用 clearInterval？

function HookTimer(): ReactElement {

  const [timer, setTimer] = useState(0)

  let intervalRef = useRef<NodeJS.Timeout>()

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setTimer(prevTimer => prevTimer + 1)
    }, 1000)
    return () => {
      clearInterval(intervalRef.current)
    }
  }, [])

  return (
    <div>
      Hook Timer - {timer}    
      <div>
        <button onClick={() => clearInterval(intervalRef.current)}>Clear Hook Timer</button>
      </div>
    </div>
  )

没有重载匹配此调用。重载 1 of 2，'(intervalId: Timeout): void'，给出了以下错误。'Timeout | 类型的参数 undefined' 不可分配给“超时”类型的参数。类型“未定义”不可分配给类型“超时”。Overload 2 of 2, '(handle?: number | undefined): void'，给出了以下错误。'Timeout | 类型的参数 undefined' 不能分配给“number |”类型的参数 不明确的'。类型“超时”不可分配给类型“数字”.ts(2769)

标签： reactjstypescriptuse-ref