ReactJS个人作品集网站EmailJS邮件发送失败问题求助

问题描述 #

开发React个人作品集网站的联系表单时，使用EmailJS实现邮件发送功能，已按官方文档配置好服务ID、模板ID和公钥，但无法收到邮件。控制台报错：

Unchecked runtime.lastError: The message port closed before a response was received.
Understand this error 2Popup.js:28 FAILED... undefined

尝试过修改代码、更换收件账户，问题仍未解决。

核心问题：表单Ref绑定错误 #

你的代码里把form ref绑定到了外层的<div className="popup">元素上，但EmailJS的sendForm方法需要的是实际的<form>元素引用。这会导致EmailJS无法读取表单数据，直接触发请求失败。

修复步骤 #

1. 将ref从外层div移到<form>标签上
2. 新增popup元素的ref，用于处理关闭弹窗的逻辑

修改后的完整代码 #

import React, { useRef, useState } from 'react';
import emailjs from '@emailjs/browser';
import './Popup.css';

const Popup = ({ onClose }) => {
  const formRef = useRef(); // 绑定到实际form元素
  const popupRef = useRef(); // 绑定到弹窗外层div
  const [successMessage, setSuccessMessage] = useState(false);
  const [unsuccessMessage, setUnsuccessMessage] = useState(false);

  const sendEmail = (e) => {
    e.preventDefault();
    console.log('Form submission started');

    emailjs.sendForm(
      'service_6e1s3cf',
      'template_rr2odv9',
      formRef.current, // 传入正确的form元素引用
      'hgXMUWhm5foVdWD4s'
    )
    .then(
      (result) => {
        console.log('SUCCESS!', result.text);
        setSuccessMessage(true);
        setTimeout(() => {
          setSuccessMessage(false);
          closeWithAnimation();
        }, 4000);
      },
      (error) => {
        console.log('FAILED...', error);
        setUnsuccessMessage(true);
        setTimeout(() => {
          setUnsuccessMessage(false);
        }, 4000);
      }
    );
  };

  const handleClose = (e) => {
    if (popupRef.current && !popupRef.current.contains(e.target)) {
      closeWithAnimation();
    }
  };

  const closeWithAnimation = () => {
    if (popupRef.current) {
      popupRef.current.classList.add('fade-out');
      setTimeout(onClose, 300);
    }
  };

  return (
    <div className="popup-overlay" onClick={handleClose}>
      <div className="popup" ref={popupRef}>
        <div className="popup-header">
          <h2 className="popup-title">Message Me</h2>
          <button className="close-button" onClick={closeWithAnimation}>
            &times;
          </button>
        </div>
        <div className="popup-content">
          {successMessage ? (
            <div className="success-message">Message sent successfully!</div>
          ) : (
            <form ref={formRef} onSubmit={sendEmail}>
              <input type="text" name="user_name" placeholder="Name*" required />
              <input type="email" name="user_email" placeholder="Email*" required />
              <textarea name="message" placeholder="Message*" required />
              <button type="submit">Send</button>
            </form>
          )}
          {unsuccessMessage && (
            <div className="unsuccess-message">Message sending failed. Please try again.</div>
          )}
        </div>
      </div>
    </div>
  );
};

export default Popup;

额外排查点（修复后仍无效时） #

• 配置信息校验：核对EmailJS后台的服务ID、模板ID、公钥，确保无拼写错误
• 模板变量匹配：EmailJS模板中的变量（如{{user_name}}）必须和表单输入框的name属性完全一致
• 浏览器扩展干扰：禁用广告拦截、隐私类扩展（如AdBlock），这类工具可能阻断EmailJS的请求
• 模板可用性测试：直接在EmailJS后台测试模板发送，确认模板本身能正常发邮件
• 网络环境检查：尝试切换网络，排查是否有防火墙或代理阻断了EmailJS的API请求

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