我正在嘗試顯示從 10 開始的倒數計時器，并使用 RN 的 setState 和 setInterval 每秒減少到 0。
我的視圖正在更新，但計時器無法正常作業。它運行得非常快，并且在 9 - 0 之間隨機跳躍。我的代碼中也沒有顯示任何錯誤。
import { StyleSheet, Text } from 'react-native'
import React, {useState} from 'react'
export default function Timer() {
// Countdown timer logic upon click event
const [time, setTime] = useState(10)
setInterval(() => {
setTime(time => time > 0 ? time - 1 : time = 10)
},1000)
return (
<Text style={styles.timer}>{time}</Text>
)
}
const styles = StyleSheet.create({
timer: {
fontWeight: '700',
fontSize: 24,
color: '#00C261',
fontFamily: 'Roboto',
width: 30,
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center'
}
})
uj5u.com熱心網友回復：
就目前而言，您在每次渲染時呼叫間隔（通過登錄間隔進行檢查），在幾次渲染后會出現“渲染競賽”，而是嘗試將邏輯放在專用鉤子中，這樣間隔只會呼叫一次。
還要注意運算式time = 10回傳10，因此您的代碼會錯誤地作業，您應該將狀態視為不可變的。
export default function Timer() {
const [time, setTime] = useState(10);
useEffect(() => {
const intervalID = setInterval(() => {
setTime((time) => (time > 0 ? time - 1 : 10));
}, 1000);
return () => {
clearInterval(intervalID);
};
}, []);
return <Text style={styles.timer}>{time}</Text>;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/475652.html
標籤：javascript 反应 反应式 设置间隔 使用状态
上一篇：在表之間傳輸變數