reactjs - 在 React 中使用 setState 时，setInterval 不能被 clearInterval 停止

Question

  const handleClick = () => {
    setState({ ...state, on: !state.on });
    let tog = state.on;
    console.log("first" + tog);
    const interval = setInterval(() => {
      if (tog) {
        console.log(tog);
      } else clearInterval(interval);
    }, 1000);
  };

在此处输入图像描述 ，即使tog为假，这个也无法停止；但是，如果我不使用状态，更改为变量就不会发生，这对我来说太奇怪了，我需要一些帮助；

let flag = true;
  const handleClick = () => {
    flag = !flag;
    console.log("first" + flag);
   const interval = setInterval(()=>{
     if(flag){
       console.log(flag);
     }else(clearInterval(interval))
   },1000)
  };

标签： reactjssetintervalclearinterval

Answer 1

React 会handleClick在每次重新渲染时创建新的，并且会有不同的 setIntervals，

const intvl = useRef(null);

const handleClick = () => {
    intvl.current = setInterval(() => { //now interval is not changing on every fn recreation
        .....

   clearInterval(intvl.current);
}

检查这个