React Hook Form结合EmailJS发邮件报422收件人地址为空错误

422报错提示The recipient address is empty，核心是EmailJS接口没有收到有效的收件人邮箱字段，你的代码里有两个和react-hook-form相关的写法冲突，直接导致了这个问题：

• register方法会自动给绑定的input添加name属性，属性值就是你传入register的第一个参数，会直接覆盖你手动写在input上的name属性。你现在邮箱输入框手动写了name='user_email'，但传入register的参数是"email"，最终渲染出来的input name实际是email，如果你的EmailJS模板里收件人字段绑定的变量名是user_email，自然读不到值。
• react-hook-form的handleSubmit回调，第一个参数是校验通过后的结构化表单数据，不是原生DOM事件。你直接在回调里拿form ref传给sendForm读DOM值，会碰到react状态更新和DOM值不同步的边缘情况，进一步加剧字段读不到的问题。

优先放弃依赖DOM读值的sendForm方法，改用emailjs.send直接传结构化的表单数据，完全绕开DOM属性不一致的问题，稳定性更高：

1. 修正表单注册逻辑，保证register的字段名和EmailJS模板里配置的变量名完全对齐，去掉多余的手动name属性（react-hook-form会自动生成），改完的表单代码如下：

return(
    <div className='box'>
        <div className='login-section'></div>
        <div className='login-text'>Thanks for answering the quiz, your score is {location.state.score} Please insert your name and email to send the results</div>
        <form onSubmit={handleSubmit(sendEmail)}>
            <label>
                Name
                <input 
                    type='text' 
                    {...register("user_name", { required: "请输入姓名" })}
                />
                <span>{errors.user_name?.message}</span>
            </label>
            <label>
                Email
                <input 
                    type='email' 
                    {...register("user_email" , { 
                        required: "请输入邮箱",
                        pattern: {
                            value: /^\S+@\S+$/i,
                            message: "请输入有效邮箱地址"
                        }
                    })}
                />
                <span>{errors.user_email?.message}</span>
            </label>
            <button type='submit'>Send</button>
        </form>
    </div>
)

2. 修正邮件发送函数，直接拿react-hook-form返回的校验后表单数据传参，不需要再绑定form ref：

const sendEmail = (formData) => {    
    emailjs.send(
        'ServiceID', 
        'TemplateID', 
        {
            user_name: formData.user_name,
            user_email: formData.user_email,
            score: location.state.score
        }, 
        'USERID'
    )
    .then((result) => {
        console.log(result.text);
        alert("提交成功!")
        navigate('/results')
    })
    .catch((error) => {
        console.log(error.text);
    });
};

如果改完还是报错，直接登录EmailJS后台进入对应模板的编辑页，检查「收件人地址」配置项绑定的变量名，和你send方法里传的字段名完全一致，不要留空或者拼写错误。

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