無法使用 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 大喊大叫，感謝他引導我朝着正確的方向前進。