带挂钩的动态倒计时计时器(React Native)

Question

我有一组数字保存到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);
}
});

Answer 1

1. 使用布尔值触发倒计时
2. 倒计时结束后，您可以更新您的redux状态

function App() {
const [counter, setCounter] = React.useState(10);
const [startCountdown, setStartCountdown] = React.useState(false);

React.useEffect(() => {
if (startCountdown) {
const timer = counter > 0 && setInterval(() => setCounter(counter - 1), 100);
if (counter === 0) {
// countdown is finished
setStartCountdown(false);
// update your redux state here
// updateReduxCounter(0);
}

return () => clearInterval(timer);
}
}, [counter, startCountdown]);
return (
<div>
<div>Countdown: {counter}</div>
<button onClick={() => setStartCountdown(true)}>Start Countdown</button>
</div>
);
}