Javascript clearInterval不会在React.useffect钩子内调用

我的React游戏有一个

组件来记录时间

游戏暂停时计时器应停止

我正在使用Redux来管理播放/暂停状态以及经过的时间

const initialState = { inProgress: false, timeElapsed: 0 }

---

inProgress

状态由另一个组件上的按钮处理，该按钮发送更新存储的操作（仅适用于

inProgress

值）

组件在其

useffect

钩子中增加

timeappeased

。但这并不清楚

import React from 'react';
import { connect } from 'react-redux';

const Clock = ({ dispatch, inProgress, ticksElapsed }) => {

    React.useEffect(() => {

        const progressTimer = setInterval(function(){
            inProgress ? dispatch({ type: "CLOCK_RUN" }) : clearInterval(progressTimer);
        }, 1000)

    }, [inProgress]);

    return (
        <></>
    )
};

let mapStateToProps = ( state ) => {
    let { inProgress, ticksElapsed } = state.gameState;
    return { inProgress, ticksElapsed };
}

export default connect(
    mapStateToProps,
    null,
)(Clock);

从“React”导入React；
从'react redux'导入{connect}；
常量时钟=（{dispatch，inProgress，ticksElapsed}）=>{
React.useffect（（）=>{
const progressTimer=setInterval（函数（）{
inProgress？分派（{type:“CLOCK_RUN”}）：clearInterval（progressTimer）；
}, 1000)
}，[inProgress]）；
返回(
)
};
让mapStateToProps=（状态）=>{
让{inProgress，ticksElapsed}=state.gameState；
返回{inProgress，ticksElapsed}；
}
导出默认连接(
MapStateTops，
无效的
)（时钟）；

在

setInterval

内部，当

inProgress

为

false

时，我希望

clearInterval（progressTimer）

停止时钟

此外，还有另一个问题，在

useffect

钩子中省略

[inProgress]

会导致计时器以荒谬的速度递增，导致应用程序崩溃

---

谢谢。

程序中的

是传递给setInterval的函数的一个示例

您可以通过清除清除函数中的间隔来解决此问题：


const Clock=（{dispatch，inProgress，ticksElapsed}）=>{
React.useffect（（）=>{
const progressTimer=setInterval（函数（）{
inProgress&dispatch（{type:'CLOCK_RUN'}）；
}, 500);
return（）=>
//inprogress已经过时了所以当它是真的
//现在必须为false才能执行清理
//被叫
进程和清除间隔（进程计时器）；
}，[发送，正在进行]；
返回{ticksElapsed}；
};
常量应用=（）=>{
const[inProgress，setInProgress]=React.useState（false）；
const[ticksElapsed，setTicksElapsed]=React.useState（0）；
const dispatch=React.useCallback(
（）=>setTicksElapsed（（t）=>t+1），
[]
);
返回(
setInProgress（（p）=>！p）}>
{inProgress？'stop'：'start'}
);
};
ReactDOM.render（，document.getElementById（'root'））