reactjs - 如果 REACT 中运行了任何先前的 setInterval，如何清除Interval？

Question

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

我对 react 还很陌生，有人能给我一些建议来解决这个问题吗？

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

使用这个constinterval = useRef();而不是varinterval

完整的工作代码: 还有codesandbox链接: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>
  );
};