尝试将 EmailJS 与 React 一起使用时服务 ID 无效答案

【问题标题】：Service ID invalid when trying to use EmailJS with React尝试将 EmailJS 与 React 一起使用时服务 ID 无效
【发布时间】：2020-10-30 07:12:36
【问题描述】：

我在我的网站上创建了一个表单来联系我，因为我使用的是 EmailJS。但是，当我尝试通过联系表格向自己发送邮件时，我收到了 400 错误 The service ID is invalid。我按照该教程的每个步骤进行操作，因为在 https://blog.mailtrap.io/react-send-email/ 之前我没有使用过 EmailJS

这是我的联系人组件

    class Contact extends React.Component {
    
      constructor(props) {
        super(props);
        this.state = { feedback: '', name: 'Name', email: 'email@example.com' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        }
    
        render() {
          return (
            <form className="test-mailing">
              <h1>Let's see if it works</h1>
              <div>
                <textarea
                  id="test-mailing"
                  name="test-mailing"
              onChange={this.handleChange}
              placeholder="Post some lorem ipsum here"
              required
              value={this.state.feedback}
              style={{width: '100%', height: '150px'}}
            />
          </div>
          <input type="button" value="Submit" className="btn btn--submit" onClick={this.handleSubmit} />
        </form>
      )
      }

      handleChange(event) {
        this.setState({feedback: event.target.value})
      }
    
      handleSubmit() {
        const templateId = 'template_id';

          this.sendFeedback(templateId, {message_html: this.state.feedback, from_name: this.state.name, reply_to: this.state.email})
      }

      sendFeedback (templateId, variables) {
        window.emailjs.send(
          'gmail', templateId,
          variables
          ).then(res => {
            console.log('Email successfully sent!')
          })
          // Handle errors here however you like, or use a React error boundary
          .catch(err => console.error('Oh well, you failed. Here some thoughts on the error that occured:', err))
        }
}

这是我在index.html 中添加的内容

`<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/emailjs-com@2.3.2/dist/email.min.js"></script>
    <script type="text/javascript">
      (function(){
        emailjs.init("my_user_ID_here"); // Obtain your user ID at the dashboard https://dashboard.emailjs.com/integration
      })();
`

【问题讨论】：

标签： javascript reactjs email frontend

【解决方案1】：

不妨分享一个可能会节省某人时间的快速修复。我在使用下面的代码时遇到了同样的问题。

const notifyOwnerOfGuest = async () => {
  const userId = 'user_...';
  const serviceId = 'service_...';
  const templateId = 'template_...';
  const accessToken = 'e2e1...';

  const postfields = {
    user_id: userId,
    service_id: serviceId,
    template_id: templateId,
    accessToken,
  };

  const response = await fetch('https://api.emailjs.com/api/v1.0/email/send', {
    method: 'POST',
    body: JSON.stringify(postfields),
    // should explicitly add the header content-type here
  });

  if (!response.ok) throw await response.text();
};

我只是像这样明确地添加了一个Content-type 标头

headers: {
    'Content-Type': 'application/json',
},

现在它可以工作了。

【讨论】：

【解决方案2】：

请尝试检查您是否使用了正确的集成 ID，检查您正在使用的 id 令牌与仪表板上集成 ID 下的那个，这是我的问题

【讨论】：

【解决方案3】：

遇到了同样的问题。要修复它，

我必须粘贴的不是“gmail”字符串本身，而是 service_id 在gmail图标下方

登录后在EmailJS网站中。每个人都有自己的特定号码。此外，template_id 对于放置为您的模板生成的 id 也很重要。

当您想要发布您的项目时，建议将您的特殊 ID 放在 .env 文件中以保持安全。

【讨论】：

【解决方案4】：

要解决此问题，我必须将 'gmail' 替换为我的服务 ID。

sendFeedback (templateId, variables) {
        window.emailjs.send(
          ***serviceID here***, templateId,
          variables
          ).then(res => {
            console.log('Email successfully sent!')
          })
          // Handle errors here however you like, or use a React error boundary
          .catch(err => console.error('Oh well, you failed. Here some thoughts on the error that occured:', err))
        }

我的网络浏览器中的 JavaScript 控制台帮助识别了这一点。

【讨论】：

【解决方案5】：

这发生在我身上，这是因为我没有激活帐户。当您登录时，点击“电子邮件服务”并选择，例如，使用您的帐户选择 gmail

pd：谷歌翻译

【讨论】：