对于传递给setInterval的函数，
我的React游戏有一个<Clock/>组件来跟踪时间。
游戏暂停时，计时器应停止。
我使用Redux来管理播放/暂停状态以及经过的时间。
const initialState = { inProgress: false, timeElapsed: 0 }
inProgress状态由另一个组件上的按钮处理，该按钮分派更新存储的操作(仅适用于inProgress值(。
<Clock/>组件在其useEffect挂钩中以setInterval递增timeElapsed。但目前还不清楚。
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);
在setInterval内部，当inProgress是false时，我希望clearInterval(progressTimer)停止时钟。
此外，还有另一个问题，在useEffect钩子中省略[inProgress]会导致计时器以荒谬的速率递增，从而导致应用程序崩溃。
谢谢。
inProgress是一个过时的闭包。
您可以通过清除函数中的间隔来解决此问题：
const Clock = ({ dispatch, inProgress, ticksElapsed }) => {
React.useEffect(() => {
const progressTimer = setInterval(function () {
inProgress && dispatch({ type: 'CLOCK_RUN' });
}, 500);
return () =>
//inprogress is stale so when it WAS true
// it must now be false for the cleanup to
// be called
inProgress && clearInterval(progressTimer);
}, [dispatch, inProgress]);
return <h1>{ticksElapsed}</h1>;
};
const App = () => {
const [inProgress, setInProgress] = React.useState(false);
const [ticksElapsed, setTicksElapsed] = React.useState(0);
const dispatch = React.useCallback(
() => setTicksElapsed((t) => t + 1),
[]
);
return (
<div>
<button onClick={() => setInProgress((p) => !p)}>
{inProgress ? 'stop' : 'start'}
</button>
<Clock
inProgress={inProgress}
dispatch={dispatch}
ticksElapsed={ticksElapsed}
/>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>