我一直在學習 MERN 堆疊教程，我想我會通過使用 EmailJS 來挑戰自己。我要做的是在新用戶創建帳戶時觸發 EmailJS 發送確認電子郵件。我正在使用正確的 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>
);
};
本教程使用背景關系和化簡器——所以我不確定這是否應該進入背景關系（仍在學習背景關系和化簡器！）。這是我在表單組件中的 onSubmit 函式——為了讓我的應用程式運行，我洗掉了 EmailJS 代碼，但它的結構與示例相同，因此const form = useRef()在onSubmit.
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...',
});
}
};
setupUser在塊onSubmit內呼叫后，我一直在放置 EmailJS 示例else。form就像在示例中一樣，我還構建了我的標簽。不同之處在于，在示例中，它們的onSubmit功能是sendEmail和我的將在下面共享。根據控制臺，我收到“OK”作為回應而不是錯誤，但沒有發送電子郵件。我當然已經檢查了我的 EmailJS 憑據，并且還沒有將它們放入.env測驗中。我setupUser在背景關系檔案中的功能是：
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，但又一次——我的輪子在轉動，想休息一下。
有沒有人有任何想法或建議？如果需要，我可以提供更多我的代碼——因為它很長，所以我保留了下來，我希望我提供了足夠的資訊。
uj5u.com熱心網友回復：
您將需要了解更多關于在 React 中處理表單的資訊。
emailJS 庫ref僅用于從form. 就是這樣。這意味著即使您沒有表單，您也可以將資訊直接傳遞到 emailJS 庫本身（如果您愿意）
所以你可以從學習如何在 React 中處理表單開始。純粹反應。直到您可以在 submitHandler 中獲得所需的所有資訊為止。
至此，您擁有了需要傳遞給 emailJS 的所有資訊，您可以將其視為一個函式：EmailJS(your-form-info)。當然，emailJS 不是這樣作業的，但在它的心里，它只是一個這樣的函式。
而且這里不涉及后端，你要做的就是處理react的表單，而emailjs是一個服務，可以幫助你發送電子郵件，所以你提到的快遞在這里無關緊要。
uj5u.com熱心網友回復：
ETA：如有必要，我可以分享我的背景關系檔案和<form>我的部分代碼。
我終于想通了，并想發布我的代碼，以防萬一有人遇到同樣的問題，希望你能避免我的一些錯誤。首先，我的問題始于 EmailJS 本身。我使用他們的模板，但我的變數與我更新的代碼不匹配。
我無法開始ref作業，因為我的表格從來沒有像那樣結構化。我ref過去成功使用過很多次。我還有一個handleSubmit與我的表單組件相關的功能。我不確定這是否是問題的一部分，ref因為我已經在表單中識別值value={values.email}，等等。無論如何，這可能是一種迂回的方式，但它一直在作業。
所以首先，我繼續在 EmailJS 中獲取我的變數以匹配我的代碼。這是我的注冊組件的完整代碼（減去回傳，還需要一些代碼清理）：
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. 最重要的是——我昨天從未設定過實際的物件！
另一個錯誤是試圖sendNewAccountEmail在onSubmit函式內撰寫。我很確定我的結構是錯誤的——所以也許這部分是可能的。
最后，我的最后一個錯誤是sendNewAccountEmail();在 if/else 陳述句之后呼叫。這讓我感到充滿希望，因為當我創建一個新用戶時它就起作用了！但是——在我的代碼中，你會看到我使用該setupUser函式兩次，因為它（在大多數情況下）在用戶登錄時做同樣的事情——它只是轉到不同endPoint的 s。猜猜發生了什么——電子郵件是在注冊和登錄時發送的。一旦我將它移入else塊并在之后呼叫它setupUser，它終于可以正常作業了！
如果你做到了這一步，我真的很感激，我希望它有意義可以對其他人有用。我仍在努力提高我的編碼技能（需要提高很多）并在學習程序中學到很多東西，所以感謝 1. 閱讀本文和 2. 了解我目前的技能。:) 另外，如果我的作業代碼中的任何內容看起來很奇怪——如果它是相關的，我完全歡迎反饋。
并在評論中向 Jimmy 大喊，因為他帶領我朝著正確的方向前進。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/472959.html