设置调用clearinterval()后不停止的间隔

Question

我正在研究一个跟踪应用程序，该应用程序启动设置间隔，在单击开始按钮后每5秒获得一次地理位置。开始按钮将跟踪状态设置为true，这将首先开始设置间隔。当我点击结束按钮时，我试图通过将轨道状态设置为false来停止设置间隔但即使轨道状态变为false，设置间隔也会继续

我的组件

<button id="start" onClick={() => setTrackState(true)}>
Start
</button>
<button id="end" onClick={() => setTrackState(false)}>
End
</button>

我钩

useEffect(() => {
console.log("track useEffect");
console.log(`trackState is ${trackState}`);
if (trackState) {
const interval = setInterval(() => {
console.log("the interval is running");
navigator.geolocation.getCurrentPosition(
onSuccess,
onError,
options
);
}, 5000);
} else {
console.log("the interval is not running");
clearInterval();
}
}, [trackState, setTrackState]);

Answer 1

我可以用下面的方法解决这个问题。我是新的反应，我不知道我必须清除setInterval两次当使用setInterval函数

useEffect(() => {
let interval = null;
console.log("track useEffect");
console.log(`trackState is ${trackState}`);
if (trackState) {
interval = setInterval(() => {
console.log("the interval is running");
navigator.geolocation.getCurrentPosition(
onSuccess,
onError,
options
);
}, 5000);
} else {
console.log("the interval is not running");
clearInterval(interval);
}
return () => clearInterval(interval);
}, [trackState]);