React表单onChange滞后一个字符 密码确认实时匹配异常问题问询

React的状态更新（useState返回的set方法）是异步批量执行的，调用setCustomerData后，当前handlePasswordChange函数作用域内的customer状态还是更新前的旧值，基于旧值做的密码一致性判断自然会比最新的输入慢一个字符。

有两种常用的修复方案：

方案1：直接用最新输入值做校验（改动最小） #

先构造更新后的完整用户数据对象，直接用这个新对象做校验，不用等待状态更新落地：

const handlePasswordChange = (event) => {
    const { name, value } = event.target;
    // 先构造最新的customer对象
    const newCustomer = {
        ...customer,
        [name]: value
    };
    setCustomerData(newCustomer);

    // 直接用新构造的对象做判断
    if(newCustomer.password === newCustomer.confirmPassword) {
        setPasswordError('passwords match')
    } else if(newCustomer.password && newCustomer.confirmPassword) {
        setPasswordError('Passwords dont match')
    } else {
        setPasswordError('');
    }
}

方案2：用useEffect监听校验（逻辑更清晰） #

把校验逻辑和状态更新逻辑分离，监听两个密码字段的变化自动触发校验，更适合后续扩展其他校验规则：

// 单独监听密码字段变化触发校验
useEffect(() => {
    if(customer.password === customer.confirmPassword) {
        setPasswordError('passwords match')
    } else if(customer.password && customer.confirmPassword) {
        setPasswordError('Passwords dont match')
    } else {
        setPasswordError('');
    }
}, [customer.password, customer.confirmPassword])

// 事件处理函数只负责更新状态即可
const handlePasswordChange = (event) => {
    const { name, value } = event.target;
    setCustomerData(prev => ({
        ...prev,
        [name]: value 
    }));
}

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