React应用集成EmailJS发送邮件失败，但测试功能正常

核心错误：sendForm 方法使用错误 #

你调用 emailjs.sendForm() 时传入了 templateParams 对象，但这个方法的第三个参数应该是DOM表单元素，而非自定义参数对象——这是表单无法发送的根本原因。

修复步骤： #

1. 替换方法：用 send 替代 sendForm
   若要手动传递参数，需使用 emailjs.send() 方法，sendForm() 是用于直接绑定表单元素、自动收集数据的接口。

2. 修复状态覆盖问题
   在 handleSubmit 中设置 loading: true 时，你直接替换了整个 formData 对象，导致原有表单数据丢失。需保留原有状态：

   setFormdata(prev => ({ ...prev, loading: true }));
   

3. 修正错误回调的状态更新
   错误回调中需同步设置 loading: false，避免按钮一直处于"Sending..."状态：

   setFormdata(prev => ({
     ...prev,
     loading: false,
     alertmessage: `Failed to send!, ${error.text}`,
     variant: "danger",
     show: true,
   }));
   

完整修复后的 handleSubmit 代码： #

const handleSubmit = (e) => {
  e.preventDefault();
  setFormdata(prev => ({ ...prev, loading: true }));

  const templateParams = {
    from_name: formData.email,
    user_name: formData.name,
    to_name: contactConfig.YOUR_EMAIL,
    message: formData.message,
  };

  emailjs
    .send(
      process.env.REACT_APP_SERVICE_ID,
      process.env.REACT_APP_TEMPLATE_ID,
      templateParams,
      process.env.REACT_APP_PUBLIC_KEY
    )
    .then(
      (result) => {
        console.log(result.text);
        setFormdata(prev => ({
          ...prev,
          loading: false,
          alertmessage: "SUCCESS! Thank you for your message",
          variant: "success",
          show: true,
        }));
      },
      (error) => {
        console.log(error.text);
        setFormdata(prev => ({
          ...prev,
          loading: false,
          alertmessage: `Failed to send!, ${error.text}`,
          variant: "danger",
          show: true,
        }));
        document.querySelector(".co_alert")?.scrollIntoView();
      }
    );
};

额外优化建议： #

• 用 document.querySelector 替代 document.getElementsByClassName，避免索引越界问题
• 修正拼写错误：messege → message
• 确保环境变量 REACT_APP_SERVICE_ID、REACT_APP_TEMPLATE_ID、REACT_APP_PUBLIC_KEY 已正确配置，且EmailJS后台模板的参数名与你传入的 templateParams 键名完全匹配

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