如果在 REACT 中任何先前的 setInterval 是运行，如何清除 clearInterval？

Question

我想制作一个倒计时计时器，其中有一个输入字段，当我输入一个数字并按下“Enter”键时，倒计时开始。但问题是当我想停止上一个间隔并使用新数字开始新间隔并按 Enter 键时，它与前一个间隔并行运行。

我对反应很陌生，有人可以给我一些建议来解决这个问题吗？

import React, {useState} from "react";

const App = () => {

  const [ctime, setctime]=useState();
 
  const enterdown=(value)=>{

      clearInterval(interval);

      setctime(value);
      var interval =  setInterval(()=>{
        value--;
        if(value==0){
          clearInterval(interval);
        }
        setctime(value);
      },1000)
  }
  return (
    <div className="wrapper">
      <div id="whole-center">
        <h1>
          Reverse countdown for<input id="timeCount" onKeyDown={(e)=>{e.key == "Enter" ?(enterdown(e.target.value)) :null}} /> sec.
        </h1>
      </div>
      <div id="current-time">{ctime}</div>  
    </div>
  )
}


export default App;

Answer 1

使用这个 const interval = useRef(); 而不是 var interval

完整的工作代码：还有 codesandbox link: https://codesandbox.io/s/zealous-monad-thhrvz?file=/src/App.js

const App = () => {
  const interval = useRef();
  const [ctime, setctime] = useState();

  const enterdown = (value) => {
    clearInterval(interval.current);

    setctime(value);
    interval.current = setInterval(() => {
      value--;
      if (value == 0) {
        clearInterval(interval.current);
      }
      setctime(value);
    }, 1000);
  };
  return (
    <div className="wrapper">
      <div id="whole-center">
        <h1>
          Reverse countdown for
          <input
            id="timeCount"
            onKeyDown={(e) => {
              e.key == "Enter" ? enterdown(e.target.value) : null;
            }}
          />{" "}
          sec.
        </h1>
      </div>
      <div id="current-time">{ctime}</div>
    </div>
  );
};

Answer 2

每次 App 函数运行时都会创建 interval 变量。
在这种情况下，每次您按 Enter。
将其置于App功能之外即可修复

let interval;

const App = () => {
  const [ctime, setctime] = useState();

  const enterdown = (value) => {
    clearInterval(interval);

    setctime(value);
    interval = setInterval(() => {
      value--;
      if (value === 0) {
        clearInterval(interval);
      }
      setctime(value);
    }, 1000);
  };
// ...

另一个解决方案是使用 useRef

如果在 REACT 中任何先前的 setInterval 是运行，如何清除 clearInterval？

how to clearInterval if any previous setInterval is running in REACT?

setinterval

clearinterval

reactjs

如果在 REACT 中任何先前的 setInterval 是 运行，如何清除 clearInterval？

how to clearInterval if any previous setInterval is running in REACT?

setinterval

clearinterval

reactjs

如果在 REACT 中任何先前的 setInterval 是运行，如何清除 clearInterval？