useReducer中dispatch放置位置为何影响登录验证结果？

我是React新手，正在学习useReducer，做了个简单登录功能：验证邮箱包含@、密码长度大于5，提交后显示成功或失败提示。

遇到的困惑：

• 将dispatch({type: 'isCredValid'})放在注释的useEffect中时，提交能正常显示"Success"
• 把该dispatch直接放在onSubmit的handleSubmit函数里，提交却显示"fail"。我原本期望不借助useEffect，直接在onSubmit中调用dispatch就能显示"Success"，这是为什么？为何放在useEffect中就能成功？

核心原因：React状态更新是异步的 #

dispatch触发状态更新后，不会立刻修改当前作用域内的credentials变量，组件需要重新渲染后才能拿到更新后的状态值。

直接在handleSubmit中调用dispatch的执行流程：

1. 点击提交，执行dispatch({ type: "isCredValid" })，这只是向React发送了状态更新请求
2. 此时当前函数作用域里的credentials还是更新前的旧值（isCredValid为false）
3. 紧接着执行if (credentials.isCredValid === true)判断，自然进入fail分支

使用useEffect的执行流程：

1. 输入邮箱/密码时，dispatch会更新isEmailValid或isPasswordValid，触发useEffect执行
2. useEffect里的dispatch会更新isCredValid，状态更新后组件重新渲染，此时credentials.isCredValid已经是正确的true
3. 点击提交时，credentials.isCredValid已经是最新的有效值，所以判断时会显示Success

解决方案 #

方案1：直接用当前状态值判断（最简洁）

不需要单独维护isCredValid状态，提交时直接用已有的isEmailValid和isPasswordValid判断：

const handleSubmit = (e) => {
    e.preventDefault()
    const isValid = credentials.isEmailValid && credentials.isPasswordValid
    isValid ? alert("Success!") : alert('failed')
}

方案2：用useEffect监听状态变化触发提示

如果一定要保留isCredValid状态，可以通过标记位配合useEffect实现：

import { useState, useReducer, useEffect } from 'react'

const Login = () => {
    const [credentials, dispatch] = useReducer(credReducer, {
        email: '',
        password: '',
        isEmailValid: false,
        isPasswordValid: false,
        isCredValid: false
    })
    const [showAlert, setShowAlert] = useState(false)

    const handleSubmit = (e) => {
        e.preventDefault()
        dispatch({ type: "isCredValid" })
        setShowAlert(true)
    }

    useEffect(() => {
        if (showAlert) {
            credentials.isCredValid ? alert("Success!") : alert('failed')
            setShowAlert(false)
        }
    }, [credentials.isCredValid, showAlert])

    // 其余handleEmail、handlePassword函数及返回部分不变
}

方案3：优化reducer逻辑

可以在reducer里新增一个submit类型，直接在提交时返回验证结果，同时更新状态：

const credReducer = (state, action) => {
    switch(action.type) {
        case 'email' :
            return {...state, email: action.value, isEmailValid: action.value.includes('@')};
        case 'password' :
            return {...state, password: action.value, isPasswordValid: action.value.length > 5};
        case 'submit':
            const isCredValid = state.isEmailValid && state.isPasswordValid
            return {...state, isCredValid};
        default :
            return state;
    }
}

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