NextJS注册页面显示成功状态而非服务器错误信息问题

我在NextJS应用中开发了一个注册页面，原本功能正常：用户输入个人信息后注册成功，表单会清空并显示成功提示。但添加成功提示功能后出现问题——用户未输入任何信息就点击注册按钮时，页面直接显示成功提示，本该展示的表单错误信息完全看不到。

当前提交按钮代码： #

const submitForm = async event => {
    event.preventDefault()

    setLoading(true)

    try {
        await register({
            first_name: firstName,
            last_name: lastName,
            email,
            setRegisterErrors,
        })
    } finally {
        setLoading(false)
        setShowRegisterForm(false)
    }
}

问题根源 #

问题出在finally块中的setShowRegisterForm(false)——finally块的特性是无论try代码块成功执行还是抛出异常，都会强制执行。

再看register函数的逻辑：

const register = async ({ setRegisterErrors, ...props }) => {
    await csrf()

    setRegisterErrors([])

    try {
        await axios.post('/register', props)
        mutate()
    } catch (error) {
        if (error.response.status !== 422) throw error

        setRegisterErrors(error.response.data.errors)
    }
}

当用户空提交触发后端422表单校验错误时，register函数只会调用setRegisterErrors存储错误信息，并不会向外抛出异常。这导致submitForm的try块顺利执行完毕，finally块必然触发，直接隐藏表单、显示成功提示，用户根本看不到错误信息。

修复方案 #

把setShowRegisterForm(false)从finally块移到try块内部，只有当注册真正成功（register函数无错误抛出）时才执行：

const submitForm = async event => {
    event.preventDefault()

    setLoading(true)

    try {
        await register({
            first_name: firstName,
            last_name: lastName,
            email,
            setRegisterErrors,
        })
        // 仅注册成功时隐藏表单，显示成功提示
        setShowRegisterForm(false)
    } catch (error) {
        // 可在此处理非422的异常，比如网络错误、服务器错误等
        console.error('注册异常:', error)
    } finally {
        // 无论成功失败，都关闭加载状态
        setLoading(false)
    }
}

修复逻辑说明 #

• 注册成功时：register函数顺利完成，try块内的setShowRegisterForm(false)执行，隐藏表单并显示成功提示。
• 表单校验失败（422错误）时：register函数仅设置错误信息，不抛出异常，try块内的隐藏逻辑不会触发，表单保持显示，用户能正常看到错误提示。
• 其他异常（如网络错误）时：register函数抛出异常，进入catch块处理，finally块仍会关闭加载状态，保证页面交互正常。

内容的提问来源于stack exchange，提问作者BigJobbies