React+Redux下setInterval仅执行一次、clearInterval不生效问题咨询

• 定时器失效、重复点击On数字闪烁：你将intervalId定义为组件内部的普通局部变量，组件每次重渲染都会重置该变量为undefined，点击Off时拿到的不是之前创建定时器返回的真实ID，clearInterval自然无法生效。重复点击On时每次都会新建一个定时器，旧定时器没有被清理，多个定时器同时修改状态就会出现数字闪烁随点击次数加剧的现象。
• setnum(num + 1)仅更新一次：这是React闭包陷阱导致的。直接传固定值的更新写法，会捕获当前渲染周期内num的快照值，定时器回调创建时num始终是初始值0，每次执行都计算0+1=1写入状态，自然只会更新一次。而函数式更新setnum(prev => prev +1)不依赖闭包捕获的旧值，React会将最新的状态传入更新函数计算结果，因此可以持续递增。
• updateUserMoney中用户属性仅更新一次：和上面的闭包问题完全一致，函数内引用的user是首次渲染时捕获的状态快照，每次定时器执行拿到的user.money都是初始值，每次都提交「初始值+1」的更新，看起来就像只触发了一次；incrementTime仅依赖固定增量1，不读取闭包中的旧状态，因此可以正常持续触发。
• 额外笔误：原代码on函数内调用的是updateuserMoney（u小写），和定义的函数名不匹配，运行时会直接报错。

• 用useRef存储定时器ID，ref对象的属性在组件全生命周期内保持稳定，不会因重渲染丢失：

// 引入需要的hooks
import { useState, useRef, useEffect } from "react";
// ...
// 替换原来的let intervalId
const intervalIdRef = useRef(null);

• 修改On/Off逻辑，启动定时器前先清理已存在的实例，避免重复创建；清理时操作ref中存储的ID：

function on(){
  // 先清理已有定时器，防止重复点击生成多个实例
  if (intervalIdRef.current) {
    clearInterval(intervalIdRef.current);
  }
  intervalIdRef.current = window.setInterval(function(){
    updateUserMoney()
    setnum(prev => prev + 1)
  }, 400);
}

function off(){
  if (intervalIdRef.current) {
    clearInterval(intervalIdRef.current);
    intervalIdRef.current = null;
  }
}

• 新增组件卸载时的定时器清理逻辑，避免内存泄漏：

useEffect(() => {
  return () => {
    if (intervalIdRef.current) clearInterval(intervalIdRef.current);
  }
}, []);

• 修复updateUserMoney的闭包问题，使用Redux更新函数形式获取最新状态，不依赖组件闭包捕获的旧user值：

function updateUserMoney(){
  batch(()=>{
    // 更新函数中拿到的永远是最新的用户状态
    dispatch(updateUser(prevUser => ({
      money: prevUser.money + 1,
      energy: prevUser.energy - 1
    })))
    dispatch(incrementTime(1))        
  })
}

• 修正on函数中的函数名笔误，将updateuserMoney改为updateUserMoney。

import { useState, useRef, useEffect } 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)
    const intervalIdRef = useRef(null)

    function updateUserMoney(){
        batch(()=>{
            dispatch(updateUser(prevUser => ({
                money: prevUser.money + 1,
                energy: prevUser.energy - 1
            })))
            dispatch(incrementTime(1))        
        })
    }
    function on(){
        if (intervalIdRef.current) {
            clearInterval(intervalIdRef.current)
        }
        intervalIdRef.current = window.setInterval(function(){
            updateUserMoney()
            setnum(prev => prev + 1)
        }, 400);
    }
    function off(){
        if (intervalIdRef.current) {
            clearInterval(intervalIdRef.current)
            intervalIdRef.current = null
        }
    }

    useEffect(() => {
        return () => {
            if (intervalIdRef.current) clearInterval(intervalIdRef.current)
        }
    }, [])

    return (
    <>
    <br/>
        <>{num}</>
        <button onClick={()=>on()}>On</button>
        <button onClick={()=>off()}>Off</button>
    </>
    );
}
 
export default GeneralActions;

内容的提问来源于stack exchange，提问作者Penn