Astro.js中React组件使用EmailJS无法发送邮件问题

在已集成React与EmailJS的Astro项目中，尝试两种方式实现联系表单（参考EmailJS官方文档、YouTube教程）均无法正常发送邮件，但相同组件在纯React项目中可正常运行。点击提交按钮无错误提示，表单看似清空但实际未发送邮件：

• 方式1提交后URL变为http://localhost:4321/?
• 方式2提交后URL变为带表单参数的http://localhost:4321/?user_name=xxx&user_email=xxx&message=xxx

Astro默认将React组件静态渲染为纯HTML，客户端未加载组件的交互逻辑，导致e.preventDefault()未执行，表单触发了默认的GET提交行为，EmailJS的发送代码根本没在浏览器中运行。

确保React组件在客户端被激活（hydrate），只需在Astro页面中引入组件时添加客户端指令（如client:load）：

示例Astro页面代码：

---
import Contact from '../components/Contact';
---

<Contact client:load />

额外检查项 #

1. 补全React依赖导入：方式1代码中使用了useState但未导入React，需补充：

import React, { useState } from 'react'; // 新增此行
import emailjs from '@emailjs/browser';

const Contact = () => {
  // ... 原有代码
};

2. 验证EmailJS配置：确认serviceId、templateId、publicKey完全正确，且EmailJS后台已完成对应模板与服务的配置（如绑定邮箱、模板参数匹配）。

3. 控制台排查：添加客户端指令后，打开浏览器开发者工具的Console面板，提交表单时查看是否有EmailJS的日志或报错，进一步定位问题。

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

const Contact = () => {
  const form = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs
      .sendForm(
        'service_dighcxs',
        'template_gxyynmw',
        form.current,
        '0KNtQ2nWh28eb1DE-'
      )
      .then(
        (result) => {
          console.log('邮件发送成功:', result.text);
          form.current.reset(); // 重置表单
        },
        (error) => {
          console.log('邮件发送失败:', error.text);
        }
      );
  };

  return (
    <>
      <h1>联系我们</h1>
      <form ref={form} onSubmit={sendEmail}>
        <label>姓名</label>
        <input type='text' name='user_name' required />
        <label>邮箱</label>
        <input type='email' name='user_email' required />
        <label>留言</label>
        <textarea name='message' required />
        <input type='submit' value='发送' />
      </form>
    </>
  );
};

export default Contact;

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