EmailJS邮件模板动态值无法显示的问题求助

核心问题 #

你遇到的动态值不显示问题，根源是react-hook-form收集的表单数据键名，和EmailJS模板里的变量名不匹配。

react-hook-form会以register()的参数作为数据键名，而非表单的原生name属性。你的代码里：

• 模板用{{message_subject}}，但register写的是messageSubject，最终提交的数据键是messageSubject，和模板变量名不一致
• 模板用{{user_email}}，register写的是userEmail，数据键不匹配
• 模板用{{message}}，register写的是userMessage，数据键也不匹配

这就是为什么模板变量无法渲染的原因。

两种解决方法 #

方法一：让register字段名和模板变量完全一致

直接修改register的参数，和EmailJS模板里的变量名（包括下划线、大小写）保持统一：

// 主题输入框
<input
  type="text"
  name="message_subject"
  placeholder="Your message subject..."
  {...register("message_subject")}
/>

// 邮箱输入框
<input
  type="email"
  name="user_email"
  placeholder="Your email..."
  {...register("user_email")}
/>

// 消息文本框
<textarea
  name="message"
  placeholder="Describe your problem or question..."
  className={styles.textarea}
  {...register("message")}
/>

这样react-hook-form收集的数据键会和模板变量完全匹配，提交后就能正常渲染。

方法二：提交时手动映射数据键

如果不想修改register的字段名，可以在提交前重新构造符合模板要求的数据对象：

import { useForm } from "react-hook-form";
import emailjs from '@emailjs/browser';

// ...

const { getValues } = useForm();

const handleSubmit = () => {
  // 获取react-hook-form收集的表单数据
  const rawData = getValues();
  // 映射成EmailJS模板需要的键名
  const emailData = {
    user_email: rawData.userEmail,
    message_subject: rawData.messageSubject,
    message: rawData.userMessage
  };

  // 调用EmailJS发送邮件
  emailjs.send('你的服务ID', '你的模板ID', emailData, '你的公钥')
    .then(res => console.log('邮件发送成功:', res.text))
    .catch(err => console.error('发送失败:', err.text));
};

额外检查点 #

1. 确认EmailJS模板中的变量名（{{user_email}}等）和最终传给emailjs.send()的emailData键名完全一致（大小写、下划线都不能错）
2. 提交前可以console.log(emailData)，检查所有字段是否有值、键名是否正确
3. 确认EmailJS的服务ID、模板ID、公钥都配置正确

内容的提问来源于stack exchange，提问作者QFaZo Play