React Native：计时器不断重置

Question

我正在尝试做一个倒数计时器，但在它达到 1 后，当它应该转到“00:00”时它会重置为 5，我不知道我哪里出错了，请有人帮助我

这是我的代码：

const CountDown = () => {
    const RESET_INTERVAL_S = 5;

    const formatTime = (time) =>
        `${String(Math.floor(time / 60)).padStart(2, "0")}:${String(
            time % 60
        ).padStart(2, "0")}`;

    const Timer = ({ time }) => {
        const timeRemain = RESET_INTERVAL_S - (time % RESET_INTERVAL_S);

        return (
            <>
                <Text>{formatTime(timeRemain)}</Text>
            </>
        );
    };

    const IntervalTimerFunctional = () => {
        const [time, setTime] = useState(0);

        console.log("The time is", time);

        useEffect(() => {
            const timerId = setInterval(() => {
                setTime((t) => t + 1);
            }, 1000);
            return () => clearInterval(timerId);
        }, []);

        return <Timer time={time} />;
    };

    return <IntervalTimerFunctional />;
};

Answer 1

useEffect(() => {
     const timerId = setInterval(() => {
     setTime((t) => t + 1);
}, 1000);
     return () => clearInterval(timerId);
}, []);

您需要设置要重复的值。如果没有，这将继续重置它。

您还可以添加一个条件来检查计时器的值并停止它。像这样：

{
   time !== 0 ? setTime((t) => t+1): time = 0;
}

Answer 2

我不确定这是一个完美的解决方案，但这可行：

您可以在计时器达到最大值时停止计时器：

 useEffect(() => {
    const timerId = setInterval(() => {
        setTime((t) => {
            if(t + 1 === RESET_INTERVAL_S) {
                clearInterval(timerId)
            }

            return t + 1;
        });
    }, 1000);

    return () => clearInterval(timerId);

}, []);

并在达到限制时显示“00:00”：

    <Text>{time === RESET_INTERVAL_S ? "00:00" : formatTime(timeRemain)}</Text>

这是一个有效的 example

React Native：计时器不断重置

React Native: Timer keeps reseting

javascript

countdowntimer

react-native