javascript - React.js 和 Firebase 身份验证 : setTimeout Callback function not executed?

Question

我有一个函数handleSubmit，用于处理在 React 组件中在 Firebase 中的注册。在内部，我想使用 setErrorTimeout 函数处理错误，该函数有一个 setTimeout，在本例中会在 3 秒后自动重置错误。

问题是，我的超时没有执行，例如超时内的回调函数在3秒后没有执行，但其他一切都是..为什么？

    const handleSubmit = async e => {
    e.preventDefault()

    console.log(formDetails)
 
    if (formDetails.password !== formDetails.passwordrepeat) {
        setErrorTimeout(setRegisterError, {
            message: 'Passwords do not match!',
        })
        return
    }

    console.log('Try')
    console.log(formDetails.email, formDetails.password)
    try {
        auth.createUserWithEmailAndPassword(
            formDetails.email,
            formDetails.password
        )
            .then(userCredentials => {
                if (userCredentials) {
                    const user = userCredentials.user
                    let success = user.sendEmailVerification()
                    console.log('success register:', success)
                    setRegisterSuccess(
                        'You registered successfully! please check your email!'
                    )

                    setFormDetails({})
                }
            })
            .catch(error => {
                console.log('ERROR!')
                setErrorTimeout(error)
            })
    } catch (e) {
        setErrorTimeout(e)
    }
}


const setErrorTimeout = error => {
    console.log('inside timeout!')
    setRegisterError(error)
    const timer = setTimeout(() => {
        console.log('inside cb!')
        setRegisterError(null)
    }, 3000)
    clearTimeout(timer)
    console.log('after timeout!')
}

Answer 1

您在此处创建超时后立即清除超时:

const timer = setTimeout(() => {
    console.log('inside cb!')
    setRegisterError(null)
}, 3000)
clearTimeout(timer)

您可能希望将 clearTimeout 调用放在回调内部，尽管由于超时已经触发，所以并不严格需要它。