需求:做一个倒计时按钮,在“发送验证码”后开始60的倒数计时。
使用 React hooks 的形式:
// 倒计时按钮状态
const [loading, setLoading] = useState(false)
const [count, setCount] = useState(60)
useEffect(() => {
if (loading) {
const btnClock = setInterval(() => {
if (count < 1) {
setLoading(false)
setCount(60)
clearInterval(btnClock)
}
setCount(prevCount => prevCount - 1)
}, 1000)
}
}, [loading])
问题:
判断 if (count < 1) 中的count 因为某种原因成了闭包(原因我很疑惑?),每次更新时,并不会从60 - 59 - 58。。。而是始终保持60。这样的话倒计时永不会结束。
解决:
使用 useRef hook 存储每次count的变化值,再在 setInterval 中引用 countRef.current
// 倒计时按钮状态
const [loading, setLoading] = useState(false)
const [count, setCount] = useState(60)
const countRef = useRef(count)
useEffect(() => {
countRef.current = count
}, [count])
useEffect(() => {
if (loading) {
const btnClock = setInterval(() => {
if (countRef.current < 1) {
setLoading(false)
setCount(60)
clearInterval(btnClock)
}
setCount(prevCount => prevCount - 1)
}, 1000)
}
}, [loading])
说明:
useEffect hook 也是顺序执行,为 countRef 在每次render 时更新。