设置间隔只运行一次功能，清除间隔不起作用（使用反应和redux）

Question

我试图连续运行一个函数，直到满足条件，但在这个测试用例中，直到按下关闭按钮。 我的第一个问题是当我按下关闭按钮时该功能不会停止。

 let intervalId function on(){ intervalId = window.setInterval(function(){ setnum(num=>num+1) //setnum(num + 1) //Line 11 results in the number going up once and if i keep pressing the button it goes up by one but flashes between numbers more and more frantically every press. The off button has no effect. //updateUserMoney() }, 400); } function off(){ clearInterval(intervalId) } return ( <> {num} <button onClick={()=>on()}>On</button> <button onClick={()=>off()}>Off</button> </>

第二个问题是我想在区间内运行的函数（即 setnum 所代表的）实际上是

 function updateUserMoney(){ batch(()=>{ dispatch(updateUser({money: user.money + 1, energy: user.energy - 1})) dispatch(incrementTime(1)) }) }

在这里，incrementTime 函数按预期工作并继续递增，但更新用户函数只触发一次。 我认为它与第 11 行存在相同的问题，其中 setnum(num + 1) 不起作用但 setnum(num => num + 1) 起作用。 我没有太多使用第二种语法，也不明白为什么它会有所不同，谁能告诉我？

这是完整的代码

 import { useState } from "react"; import { batch, useDispatch, useSelector } from "react-redux"; import { incrementTime, updateUser } from "../actions"; const GeneralActions = () => { const dispatch = useDispatch() const user = useSelector((state)=>state.user) const [num, setnum]= useState(0) let intervalId function updateUserMoney(){ batch(()=>{ dispatch(updateUser({money: user.money + 1, energy: user.energy - 1})) dispatch(incrementTime(1)) }) } function on(){ intervalId = window.setInterval(function(){ updateuserMoney() setnum(num=>num+1) }, 400); } function off(){ clearInterval(intervalId) } return ( <> <br/> <>{num}</> <button onClick={()=>on()}>On</button> <button onClick={()=>off()}>Off</button> </> ); } export default GeneralActions;

任何见解都值得赞赏。 谢谢！

Answer 1

每次你在 React 中设置一个新的状态值，你的组件都会重新渲染。 当您的GeneralActions组件重新呈现时，您的整个函数会再次运行：

const GeneralActions = () => {
  // code in here runs each render 
}

这意味着诸如intervalId之类的东西将在运行时设置为undefined let intervalId; 再一次，依此类推，在这个特定的渲染中，您将丢失您在之前的渲染中设置的任何参考。 因此，当您调用off()时，它将无法引用您在之前的渲染中设置的intervalId ，因此不会清除该间隔。 如果你想要持久变量（与状态无关），你可以像这样使用useRef()钩子：

const GeneralActions = () => {
  const intervalIdRef = useRef();
  ...
  
  function on(){
    clearInterval(intervalIdRef.current); // clear any currently running intervals
    intervalIdRef.current = setInterval(function(){
      ...
    }, 400);
  }

  function off(){
    clearInterval(intervalIdRef.current);
  }
}

我在上面添加的一件事是在执行on()时清除任何已经创建的间隔，这样你就不会排队多个。 您还应该在组件卸载时调用off() ，这样您就不会在组件不再存在时尝试更新您的状态。 这可以使用带有空依赖数组的useEffect()来完成：

useEffect(() => {
  return () => off();
}, []);

那应该解决与无法清除计时器有关的问题。

您的另一个问题是关于setNum()是您对setTimeout()回调的num变量有一个闭包。 如上所述，每次你的组件重新渲染时，你的函数体都会被执行，所以所有的变量/函数都被再次声明，本质上创建了每次渲染的不同“版本”的num状态。 您面临的问题是，当您调用setInterval(function(){})时， function() {} () {} 中的num变量将引用创建函数时/调用setInterval()函数时的num版本. 这意味着当您更新num状态时，您的组件会重新渲染，并使用更新后的值创建一个新的num版本，但是您传递给setInterval()的函数仍然引用旧的num 。 因此setNum(num + 1)将始终将1添加到旧数字值。 但是，当您使用useState(num => num + 1)时，您所指的num变量不是您定义的函数周围范围的num “版本”/变量，而是num状态的最新版本，它允许您正确更新num 。