React应用向EmailJS API发送HTML超链接失败问题求助

核心问题 #

1. setState异步导致调试错误：你在setMessage(msg)后立刻console.log(message)，但React的setState是异步操作，此时打印的是旧的message值，并非刚生成的HTML字符串，这会误导你对实际传递内容的判断。
2. sendForm的表单值转义问题：emailjs.sendForm会读取表单DOM元素的value属性，普通表单输入框会自动将HTML字符串转义为纯文本，导致传递给EmailJS的不是原始HTML片段。
3. 链接路径不完整：你的base变量缺少http://前缀，邮件客户端会将其识别为相对路径，即使HTML渲染正常，链接也无法跳转。

修复步骤 #

1. 修正setState的调试逻辑

用useEffect监听message状态变化，确保打印的是最新值：

import { useEffect, useState } from 'react';

// 假设你已经声明了message状态
const [message, setMessage] = useState('');

const getMessage = () => {
  // 补全http前缀，确保链接可正常访问
  const base = "http://localhost:3000/approval/";
  // 用模板字符串简化拼接，避免引号转义错误
  const link = `${base}${employeeEmail}/${month}/${year}`;
  const msg = `<a href="${link}" style="padding: 12px; border-left: 4px solid #d0d0d0; font-style: italic;">View Timesheet</a>`;
  setMessage(msg);
};

// 监听message变化，打印最新值
useEffect(() => {
  console.log('最新的HTML内容:', message);
}, [message]);

2. 改用send方法直接传递参数

放弃sendForm，使用emailjs.send直接传入参数对象，避免表单的自动转义：

const sendEmail = (e) => {
  e.preventDefault();
  emailjs.send('service', 'template', {
    message: message,
    // 若需要其他表单字段，直接从状态或DOM读取传入，比如：
    // username: form.current.username.value
  }, 'abc')
  .then((result) => {
    console.log('邮件发送成功:', result);
  }, (error) => {
    console.log('发送失败:', error.text);
  });
};

3. 确认EmailJS模板设置

确保你的EmailJS模板中，message变量使用三重花括号{{{ message }}}（Handlebars语法，用于不转义渲染HTML），避免模板引擎将HTML标签转义为文本。

额外注意事项 #

• 测试时可以先手动将生成的HTML字符串复制到EmailJS模板中预览，确认样式和链接是否正常渲染，排除模板本身的问题。
• 若邮件客户端仍不渲染HTML，检查EmailJS的邮件发送设置是否开启了"HTML格式"（多数情况下默认开启）。

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