React登录页面需点击两次才验证数据，求原因及解决方法

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

你遇到的「点击两次才触发验证」问题，本质是React的useState更新是异步的：

• 第一次点击登录时，你调用setErrors(Validation(values))更新错误状态，但errors并不会立刻变成新值。紧接着的if(errors.password === "" && errors.email === "")判断，用的还是更新前的旧errors值（初始是空对象或者上一次的错误），条件不成立，所以不会执行登录请求。
• 第二次点击时，errors已经完成上一次的异步更新，此时判断的是最新的验证结果，条件满足才会触发请求。

额外隐藏问题：输入值被存为数组 #

你的handleInput函数里，把输入值用数组包裹了：[e.target.value]，这会导致values里的email和password是数组类型，不仅可能让Validation函数判断出错，还会导致后端接收的数据格式异常，需要一并修复。

修复代码 #

1. 修复handleSubmit的判断逻辑

直接使用Validation的返回值做判断，跳过异步状态的等待：

const handleSubmit = (e) => {
    e.preventDefault()
    // 先获取验证结果
    const validationErrors = Validation(values)
    // 更新错误状态
    setErrors(validationErrors)
    // 直接用验证结果判断，不用等state更新
    if(validationErrors.password === "" && validationErrors.email === ""){
        axios.post('http://localhost:8081/login', values)
        .then(res => {
                if(res.data.errorMessage ==='Success'){
                    navigate('/dashboard');
                }
                else{
                    console.log(res.data.errorMessage);
                }
        })
        .catch(err => console.log(err));
    }
};

2. 修复handleInput的值存储逻辑

去掉数组包裹，把输入值存为字符串：

const handleInput = (e) => {
    setValues(prev => ({...prev, [e.target.name]: e.target.value}))
}

总结 #

• 异步状态更新导致第一次点击时无法获取最新验证结果，是触发两次的直接原因；
• 输入值存为数组是潜在的格式问题，会引发后续验证或接口请求的异常。

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