我的代碼中有一個名為“url”的組件的影像串列。我還有一個名為currImageIndex. 我想要發生的是每次渲染這個組件時，我想啟動一個計時器。這個計時器運行的每一秒，我都想增加我的狀態變數currImageIndex。當currImageIndex 1大于或等于url長度時，我想重置currImageIndex為零。總體目標是通過僅回傳 來模擬影像的自動幻燈片放映<img src={url[currImageIndex]}>。但是，我在增加狀態變數時遇到問題。我遵循了我在這里找到的一些代碼，但我不知道如何讓增量作業。這是我的代碼。
const { url } = props;
const [currImageIndex, setCurrImageIndex] = useState(0);
console.log(url)
const increment = () => {
console.log(url.length)
console.log(currImageIndex)
if (currImageIndex 1 < url.length) {
setCurrImageIndex((oldCount) => oldCount 1)
}
else {
setCurrImageIndex(0)
}
}
useEffect(() => {
const id = setInterval(increment, 1000);
return () => clearInterval(id);
}, []);
return (
<div className={styles.container}>
<div className={styles.header}>Preview of GIF:</div>
<img src={url[currImageIndex]} alt="GIF Preview" className={styles.image} />
<div>{currImageIndex}</div>
</div>
);
當我使用url大小為 2 的a 運行它時，倒數第三行（“{currImageIndex}”）顯示 1 然后是 2 然后是 3 等等。它永遠不會重置。我的console.log(url.length)印刷品 2 和我的console.log(currImageIndex)印刷品 0。我想要發生的currImageIndex應該是 0, 1, 0, 1, 0, 1,.... 誰能幫我理解我做錯了什么？謝謝！
uj5u.com熱心網友回復：
原因是 setInterval 上傳遞的回呼僅訪問currImageIndex第一次渲染中的變數，而不是渲染時的新值，因此您將始終獲取currImageIndex = 0并傳遞條件if (currImageIndex 1 < url.length)。我更新了你的代碼，讓它像你期望的那樣作業：
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/350011.html
標籤：javascript 反应 反应钩子 使用效果 使用状态