我在這里找到的大多數答案是在 useEffect() 的 return 陳述句中使用 clearInterval()。但是，由于某些原因，它仍然會繼續執行。
我還在日志中收到以下警告：-
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in StartTest (at SceneView.tsx:126)
附上參考代碼。
const [connectionInterval, setConnectionInterval] = useState(null);
const [batteryInterval, setBatteryInterval] = useState(null);
const [heartRateInterval, setHeartRateInterval] = useState(null);
useEffect(() => {
startServices();
return () => {
clearServices();
};
}, []);
const startServices= () => {
let ctnInt = setInterval(() => checkConnection(), 5000);
setConnectionInterval(ctnInt);
let btryInt = setInterval(
() =>
Battery(value => {
setBattery(value);
}),
900000,
);
setBatteryInterval(btryInt);
let hrRtInt = setInterval(
() =>
HeartRate(
hr => {
if (finish) {
clearInterval(heartRateInterval);
}
let rate = Math.round(hr);
setHeartRate(rate);
},
onError => {
console.log('API ERROR');
},
),
3000,
);
setHeartRateInterval(hrRtInt);
};
const clearServices = () => {
clearInterval(connectionInterval);
clearInterval(batteryInterval);
clearInterval(heartRateInterval);
};```
uj5u.com熱心網友回復：
您沒有將任何 deps 傳遞給useEffect，因此效果函式永遠不會更新，并且在clearServices您呼叫的版本中，connectionInterval朋友們都還在null. 請參閱此處的注釋。
一般來說，我會這樣處理setInterval：
useEffect(() => {
const intervalFn = () => {
console.log('interval fired')
}
const intervalId = setInterval(intervalFn, 1000)
return () => {
clearInterval(intervalId)
}
}, [])
（這個版本真的沒有依賴，因為一切都在 useEffect 中捕獲。但實際上你可能會有一些。）
uj5u.com熱心網友回復：
幾周前我遇到了這個問題，為了阻止它，我在清除間隔后設定了一個新狀態。
例如。我試圖建立一個從 30 到 0 并停在 0 的倒計時。這就是我所做的
const [timeRemaining, setTimeRemaining] = useState(30);
useEffect(() => {
let timeLeft = timeRemaining;
let interval = setInterval(() => {
if (timeLeft === 0) {
clearInterval(interval);
setTimeRemaining(0);
} else {
setTimeRemaining((timeLeft -= 1));
}
}, 1000);
}, [timeRemaining]);
清除間隔后將狀態設定為 0 是將倒數計時器停止在 0 的唯一方法
uj5u.com熱心網友回復：
在 useEffect 中，您應該在回呼函式之后在陣列中宣告依賴項。在上面的代碼中，startServices是依賴項，因為它是在 useEffect 之外宣告的。
https://reactjs.org/docs/hooks-reference.html#useeffect
您可以在鏈接中了解 useEffect 。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/411765.html
標籤：
上一篇：動態形式的未定義屬性