React Js中验证错误对象为空时邮件仍无法发送问题排查

问题根因 #

你遇到的问题是两个常见的React开发误区共同导致的：

• React的setErrors是异步状态更新方法，调用后不会立刻更新当前作用域下的errors变量，你在调用setErrors后立刻读取errors拿到的是上一次渲染的旧值，无法拿到本次最新的验证结果。
• 你写的空对象判断逻辑完全不生效：JS中对象是引用类型，errors === {}永远返回false，且你的验证函数永远返回普通对象，errors === 0、errors === null、errors === []这些判断完全没有匹配的可能，所以哪怕验证通过，也永远走不到发邮件的分支。
  另外你原本的代码在邮件发送请求刚发起时就清空了表单，不需要等请求返回结果，逻辑也不合理，可以优化为发送成功后再清空表单。

修复方案 #

直接把验证结果存到临时变量中，先判断验证结果是否为空，再执行对应逻辑即可，空对象用Object.keys()判断长度是否为0即可。

修复后的ContactHandler代码如下：

const ContactHandler = (e) => {
    e.preventDefault();
    // 先拿到验证结果存在临时变量中
    const validationErrors = ContactValidation(values);
    setErrors(validationErrors);

    // 直接判断临时变量是否是空对象
    if (Object.keys(validationErrors).length === 0) {
        emailjs.sendForm('api_hidden', 'swiftquiz_template', form.current, 'api_hidden')
            .then((result) => {
                console.log(result.text);
                alert("Sent Successfully ^_^");
                // 发送成功后清空表单和错误提示
                setValues({ name: "", email: "", phone: "", subject: "", description: "" });
                setErrors({});
            }, (error) => {
                console.log(error.text);
            });
    } else {
        console.log("All Fields are required");
    }
}

内容的提问来源于stack exchange，提问作者jerek.orlin