javascript - 仅使用 React 钩子(Hook)的功能齐全的倒数计时器

Question

这是我的代码。您也可以查看 Stackblitz :

import React, { useState } from 'react';

const Timer = ({
    initialHours = 10,
    initialMinutes = 0,
    initialSeconds = 0,
}) => {
    const [hours, setHours] = useState(initialHours);
    const [minutes, setMinutes] = useState(initialMinutes);
    const [seconds, setSeconds] = useState(initialSeconds);

    let myInterval;

    const startTimer = () => {
        myInterval = setInterval(() => {
            if (seconds > 0) {
                setSeconds(seconds - 1);
            }
            if (seconds === 0) {
                if (hours === 0 && minutes === 0) {
                    clearInterval(myInterval);
                } else if (minutes > 0) {
                    setMinutes(minutes - 1);
                    setSeconds(59);
                } else if (hours > 0) {
                    setHours(hours - 1);
                    setMinutes(59);
                    setSeconds(59);
                }
            }
        }, 1000);
        cancelTimer();
    };
    const cancelTimer = () => {
        return () => {
            clearInterval(myInterval);
        };
    };

    return (
        <div>
            <h1 className='timer'>
                {hours < 10 && hours !== 0 ? `0${hours}:` : hours >= 10 && `${hours}:`}
                {minutes < 10 ? `0${minutes}` : minutes}:
                {seconds < 10 ? `0${seconds}` : seconds}
            </h1>
            <button onClick={startTimer}>START</button>
            <button>PAUSE</button>
            <button>RESUME</button>
            <button onClick={cancelTimer}>CANCEL</button>
        </div>
    );
};

export default Timer;

我在使用 时遇到问题开始 按钮，这就是我单击 时的样子开始 多次按钮:

您会注意到，在第一次单击时，数字永远不会继续下降，除非我单击 START。按钮一次又一次，但它看起来像一台坏掉的老虎机。如果我点击 CANCEL按钮，它应该停止计时器并重置回设置的时间，但它没有。我不知道如何解决这 2 个按钮的问题，还有更多 PAUSE 的问题。和 RESUME .我也不知道如何让它们工作。请帮忙。

Answer 1

正如@Felix Kling 所建议的那样，您可以尝试一种不同的方法，以检查您的代码为什么不起作用检查以下代码，我在您的 Timer 组件中进行了一些更改:

import React, { useState } from 'react';

const Timer = ({
    initialHours = 10,
    initialMinutes = 0,
    initialSeconds = 0,
}) => {
    const [time, setTime] = useState({
        h: initialHours,
        m: initialMinutes,
        s: initialSeconds,
    });

    const [timer, setTimer] = useState(null);

    const startTimer = () => {
        let myInterval = setInterval(() => {
            setTime((time) => {
                const updatedTime = { ...time };
                if (time.s > 0) {
                    updatedTime.s--;
                }

                if (time.s === 0) {
                    if (time.h === 0 && time.m === 0) {
                        clearInterval(myInterval);
                    } else if (time.m > 0) {
                        updatedTime.m--;
                        updatedTime.s = 59;
                    } else if (updatedTime.h > 0) {
                        updatedTime.h--;
                        updatedTime.m = 59;
                        updatedTime.s = 59;
                    }
                }

                return updatedTime;
            });
        }, 1000);
        setTimer(myInterval);
    };

    const pauseTimer = () => {
        clearInterval(timer);
    };

    const cancelTimer = () => {
        clearInterval(timer);
        setTime({
            h: initialHours,
            m: initialMinutes,
            s: initialSeconds,
        });
    };

    return (
        <div>
            <h1 className='timer'>
                {time.h < 10 && time.h !== 0
                    ? `0${time.h}:`
                    : time.h >= 10 && `${time.h}:`}
                {time.m < 10 ? `0${time.m}` : time.m}:
                {time.s < 10 ? `0${time.s}` : time.s}
            </h1>
            <button onClick={startTimer}>START</button>
            <button onClick={pauseTimer}>PAUSE</button>
            <button onClick={cancelTimer}>CANCEL</button>
        </div>
    );
};

export default Timer;
    

解释:

在您调用 cancelTimer

的最后一行的 startTimer 函数中

当您使用钩子(Hook)时，请记住，除非您在 set 函数中使用函数(就像我在 setTime 和该回调中所做的那样)，否则您不会获得状态变量的更新值，您将获得更新的值作为第一个参数

在 cancelTimer 方法中，您将返回一个必须调用 clearInterval 的函数，而且 myInterval 在 cancelTimer 中未定义，因此我将其值设置为状态

更多信息和其他方式 check this question