如何解决带钩子的动态倒数计时器React Native
我有一组数字被保存到redux中以进行一组练习。当您进入每个练习的页面并按完成时,计时器会将所有计数递减至零,然后重置为原始编号。
因此,我将使用useState
设置原始值。
const [count,setCount] = useState({ReduxValue});
但是然后我将使用useEffect
进行倒数并将数字重置为原始值,对吗? useEffect
会怎么称呼?初始状态值(setInitialTime
)?
我会使用相同的useEffect
重设值吗?
编辑: 到目前为止,这就是我所拥有的。一旦数字降为零,它就会跳出来,而下一次在倒计时期间,它似乎是跳过或跳跃数字。
function Counter() {
const [count,setCount] = useState({ReduxValue});
const [isActive,setIsActive] = useState(false);
function startTimer() {
setCount({ReduxValue});
setIsActive(true);
}
useEffect(() => {
let interval = null;
if (isActive) {
interval = setInterval(() => {
count - 1 < 0 ? setCount(5) : setCount(count - 1);
},1000);
} else if (!isActive && count != 0) {
clearInterval(setInterval);
}
});
解决方法
- 使用布尔值触发倒计时。
- 倒计时结束后,您可以更新自己的redux状态。
O(n^2)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。