Javascript 面临在React中未清除间隔的问题

我在React中做了一个项目，我想做的是在start按钮上开始计算1000的阶乘，然后单击cancel按钮取消计算。因此，我使用了setInterval，以下是全部代码：

import React, { useState } from "react";

const Button = ({ title, countButton }) => {
  const [result, setResult] = useState(0);

  let interval;

  const handleFactorial = (num) => {
    let iteration = 1;
    let value = 1;

    interval = setInterval(function () {
      value = value * iteration;
      console.log(iteration++);
      if (iteration === num) {
        setResult(value);
        console.log(result);
        clearInterval(interval);
      }
    }, 0);
  };

  let cancelFactorial = () => {
    clearInterval(interval);
  };

  return countButton ? (
    <button onClick={() => handleFactorial(1000)}>{title}</button>
  ) : (
    <button onClick={cancelFactorial}>{title}</button>
  );
};

export default Button;

import React，{useState}来自“React”；
常量按钮=（{title，countButton}）=>{
const[result，setResult]=useState（0）；
让间隔；
常量handleFactorial=（num）=>{
设迭代=1；
设值=1；
间隔=设置间隔（函数（）{
值=值*迭代；
log（迭代++）；
如果（迭代===num）{
设置结果（值）；
控制台日志（结果）；
间隔时间；
}
}, 0);
};
让cancelFactorial=（）=>{
间隔时间；
};
返回按钮(
手工艺品（1000）}>{title}
) : (
{title}
);
};
导出默认按钮；

---

问题是当我点击取消按钮时，这是一个

{title}

，但是计算一直在进行。因此，我需要您的帮助

您应该为此使用一个引用，就好像您记录了

间隔

值一样，您会注意到您在每次渲染时都会重新指定其值

const Button = ({ title, countButton }) => {
  const intervalRef = useRef();

  const handleFactorial = (num) => {
    intervalRef.current = setInterval(function () {...}, 0);
  };

  let cancelFactorial = () => {
    clearInterval(intervalRef.current);
  };
...
}

---

您需要使用[useRef][1]来保持对间隔的引用

//不要那样做
//让间隔；
//改为这样做
const intervalRef=useRef（）；
interval.current=setInterval（函数（）{…}）
const cancelFactorial=（）=>{
clearInterval（interval.current）；
};

嗨，丹尼斯，谢谢你友好的回答。好的，我更改了代码并使用了useRef（），但即使使用了“取消”按钮，操作仍会继续