您好，我想將 setInterval 放入我的 React 專案中以每秒添加 1，但我收到了一個類似于這篇文章標題的錯誤。js：
const [activeTab, setActiveTab] = useState(0)
useEffect(() => {
setInterval(setActiveTab(prevTab => {
if (prevTab === 3) return 0
console.log('hi')
return prevTab = 1
}), 1000)
})
uj5u.com熱心網友回復：
有幾個問題：
您沒有將函式傳遞給
setInterval，而是呼叫setActiveTab并將其回傳值傳遞給setInterval.如果您傳入一個函式，那么每次您的組件運行時，您都會添加一個新的重復計時器。請參閱檔案 -
useEffect：默認情況下，效果會在每次完成渲染后運行...
并且
setInterval：該
setInterval()方法...重復呼叫一個函式或執行一段代碼片段，每次呼叫之間有固定的時間延遲。（我的重點）
每次你的組件重新渲染時啟動一個新的重復計時器會創建很多重復計時器。
如果組件已卸載，您的組件將使間隔計時器繼續運行。它應該停止間隔計時器。
要修復它，傳入一個函式，添加一個依賴陣列，并添加一個清理回呼來停止間隔：
const [activeTab, setActiveTab] = useState(0);
useEffect(() => {
const handle = setInterval(() => { // *** A function
setActiveTab(prevTab => {
if (prevTab === 3) return 0;
console.log("?ghi");
return prevTab = 1;
});
}, 1000);
return () => { // *** Clear the interval on unmount
clearInterval(handle); // ***
}; // ***
}, []); // *** Empty dependency array = only run on mount
旁注：假設您不需要console.log，該狀態設定器回呼函式可以通過使用余數運算子更簡單：
setActiveTab(prevTab => (prevTab 1) % 3);
uj5u.com熱心網友回復：
useEffect(() => {
setInterval(() => {
setActiveTab((prevTab) => {
if (prevTab !== 3) {
return (prevTab = 1);
} else {
return 0;
} // console.log("hi");
});
}, 1000);
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/419635.html
標籤：