无法使用 EmailJS/React 发送 email

Question

我一直在学习 MERN 堆栈教程，我想我会通过使用 EmailJS 来挑战自己。 我想要做的是在新用户创建帐户时触发 EmailJS 发送确认 email。 我正在使用正确的 EmailJS 库，并且已经尝试并尝试使用他们文档中的 React 示例，如下所示：

import emailjs from '@emailjs/browser';

export const ContactUs = () => {
  const form = useRef();

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

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

  return (
    <form ref={form} onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="user_name" />
      <label>Email</label>
      <input type="email" name="user_email" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );
};

本教程使用 context 和 reducer——所以我不确定这是否应该 go 进入上下文（仍在学习 context 和 reducers。），这是我在表单组件中的 onSubmit function——我删除了 EmailJS 代码为了让我的应用程序运行，但它的结构与示例相同，因此在onSubmit中声明了const form = useRef() 。

const onSubmit = (e) => {
    e.preventDefault();
    const { name, email, password, isMember } = values;
    if (!email || !password) {
      displayAlert();
      return;
    }
    const currentUser = { name, email, password };
    if (isMember) {
      setupUser({
        currentUser,
        endPoint: 'login',
        alertText: 'Login Successful! Redirecting...',
      });
    } else {
      setupUser({
        currentUser,
        endPoint: 'register',
        alertText: 'User Created! Redirecting...',
      });
    }
  };

在else块中的onSubmit中调用setupUser之后，我一直在放置 EmailJS 示例。 我还像示例中一样构造了我的form标签。 一个区别是，在示例中，他们的onSubmit function 是sendEmail ，我的将在下面共享。 根据控制台，我收到“OK”作为响应而不是错误 — 但没有发送 email。 我当然已经检查了我的 EmailJS 凭据，并且还没有将它们放入.env中以用于测试目的。 我的上下文文件中的setupUser function 是：

const setupUser = async ({ currentUser, endPoint, alertText }) => {
    dispatch({ type: SETUP_USER_BEGIN })
    try {
      const { data } = await axios.post(`/api/v1/auth/${endPoint}`, currentUser)

      const { user, token } = data
      dispatch({
        type: SETUP_USER_SUCCESS,
        payload: { user, token, alertText },
      })
      addUserToLocalStorage({ user, token })
    } catch (error) {
      dispatch({
        type: SETUP_USER_ERROR,
        payload: { msg: error.response.data.msg },
      })
    }
    clearAlert()
  }

我还没有尝试将任何与 EmailJS 相关的东西放入上下文文件中，因为我刚刚到了我正在旋转轮子的地步。 我的应用程序也有一个 Express 后端，所以我考虑过使用他们的 REST API，但又一次——我的车轮在旋转，想休息一下。

有人有什么想法或建议吗？ 如果需要，我可以提供更多我的代码——我之所以推迟是因为它太长了，我希望我提供了足够的信息。

Answer 1

您将需要了解有关在 React 中处理 forms 的更多信息。

emailJS 库使用ref只是为了从form中获取信息。 就是这样。 这意味着即使您没有表单，您也可以将信息直接传递到 emailJS 库本身（如果需要）

所以你可以从学习如何在 React 中处理表单开始。 纯反应。 直到您可以在 submitHandler 中获得所需的所有信息。
从这一点开始，您拥有了需要传递给 emailJS 的所有信息，您可以将其视为 function：EmailJS(your-form-info)。 当然，emailJS 不是那样工作的，但在本质上，它只是一个 function 那样的。

而且这里没有后端涉及，您所做的只是处理响应的表单，而 emailjs 是一项服务，可帮助您发送 email，因此您提到的快递在这里无关紧要。

Answer 2

预计到达时间：如有必要，我可以共享我的上下文文件和代码的<form>部分。

我终于弄明白了这一点，并想发布我的代码以防万一有人遇到同样的问题，希望你能避免我的一些错误。 首先，我的问题始于 EmailJS 本身。 我使用他们的模板，但我的变量与更新后的代码不匹配。

我无法让ref工作，因为我的表格从来没有像那样构造过。 我过去曾多次成功使用ref 。 我还有一个handleSubmit function 绑定到我的表单组件。 我不确定这是否是ref问题的一部分，因为我已经确定了表单中的值—— value={values.email}等。无论如何——这可能是一种迂回的方式，但它一直是在职的。

所以首先，我继续在 EmailJS 中获取我的变量以匹配我的代码。 这是我的 Register 组件的完整代码（减去返回并且还需要一些代码清理）：

import { useState, useEffect } from 'react';
import { Logo, FormRow, Alert } from '../components';
import Wrapper from '../assets/wrappers/RegisterPage';
import { useAppContext } from '../context/appContext';
import { useNavigate } from 'react-router-dom';
import emailjs from '@emailjs/browser';

const initialState = {
  name: '',
  email: '',
  password: '',
  isMember: true,
};

const Register = () => {
  const navigate = useNavigate();
  const [values, setValues] = useState(initialState);
  const { user, isLoading, showAlert, displayAlert, setupUser } =
    useAppContext();
  
  const obj = {
    userName: values.name,
    userEmail: values.email,
  };
  
  const sendNewAccountEmail = (obj) => {
    emailjs
      .send(
        'service id goes here',
        'template id goes here',
        obj,
        'public key goes here'
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

  const toggleMember = () => {
    setValues({ ...values, isMember: !values.isMember });
  };

  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };
  const onSubmit = (e) => {
    e.preventDefault();
    const { name, email, password, isMember } = values;
    if (!email || !password) {
      displayAlert();
      return;
    }
    const currentUser = { name, email, password };
    if (isMember) {
      setupUser({
        currentUser,
        endPoint: 'login',
        alertText: 'Login Successful! Redirecting...',
      });
    } else {
      setupUser({
        currentUser,
        endPoint: 'register',
        alertText: 'User Created! Redirecting...',
      });
      sendNewAccountEmail();
    }
  };

  useEffect(() => {
    if (user) {
      setTimeout(() => {
        navigate('/');
      }, 3000);
    }
  }, [user, navigate]);

更多的错误，我没有在我的对象中正确使用我的表单值——例如，我有

  const obj = {
    userName: name,
    userEmail: email,
  };

这引发了一个错误，因为我不应该使用name ，但我看得越多，我就知道这是错误的。 然后我尝试使用

  const obj = {
    userName: user.name,
    userEmail: user.email,
  };

愚蠢的我——我从来没有定义过user 。 最重要的是——我昨天从未设置过实际的 object！

另一个错误是试图在onSubmit function 中编写sendNewAccountEmail 。我很确定我的结构是错误的——所以也许那部分是可能的。

最后，我的最后一个错误是调用sendNewAccountEmail(); 在 if/else 语句之后。 这让我感到充满希望，因为它在我创建新用户时有效，但是 - 在我的代码中，你会看到我使用了setupUser function 两次，因为它（大部分）在用户登录时做同样的事情in——它只是去不同的endPoint s。 猜猜发生了什么——电子邮件是在注册和登录时发送的。 一旦我将它移到else块并在setupUser之后调用它，它终于可以正常工作了！

如果你做到了这一点，我真的很感激，我希望它有意义可以对其他人有用。 我仍在努力提高我的编码技能（有很多需要改进的地方）并像我 go 一样学习很多东西，所以感谢 1. 阅读本文和 2. 了解我当前的技能。 :) 此外，如果我的工作代码中有任何内容看起来很奇怪——如果相关，我完全欢迎反馈。

并在评论中向 Jimmy 大喊大叫，感谢他引导我朝着正确的方向前进。