useEffect意外触发

Question

useEffect挂钩被意外调用。一旦计时器达到零，并且将其设置为10（使用“重新发送Otp”按钮），则计时器开始减少的时间超过1秒。

我的组件如下：

const EnterOtpView = ({ touched, errors, isSubmitting }) => {
    const [timer, setTimer] = useState(3);

    useEffect(() => {
        if (timer > 0) {
            setInterval(() => setTimer((prevTimer) => prevTimer - 1), 1000);
        }
    }, [timer]);

    return (
        <div>

                {timer > 0 ? (
                    <p>Resend Otp in: {timer} seconds</p>
                ) : (
                    <button
                        type='button'
                        className='btn btn-link'
                        onClick={() => setTimer(10)}
                    >
                        resend otp
                    </button>
                )}
        </div>
    );
};

我尝试过的：

• 已从useEffect的依赖关系数组中删除计时器
• 创建一个单独的函数来减少计时器

任何帮助将不胜感激。 😇

Answer 1

对我有用的解决方案：

 useEffect(() => {

            setInterval(() => setTimer((prevTimer) => prevTimer - 1), 1000);

    }, []);

[我刚刚如上所述更改了useEffect，即使其变成了useEffect的componentDidMount形式，现在可以正常使用了。