EmailJs 和表單驗證問題，React

Question

我在通過 EmailJs 在 React 中發送電子郵件時遇到問題。 當我驗證表單並且所有錯誤消失時，表單僅在第二次單擊后才發送 email，我真的不知道為什么會發生這種情況。 請幫忙

 const useForm = (callback, validate) => { const [values, setValues] = useState({ title: "", email: "", message: "", }); const [errors, setErrors] = useState({}); const [send, setSend] = useState(false); const [isSubmiting, setIsSubmiting] = useState(false); useEffect(() => { if (Object.keys(errors).length === 0) { if (isSubmiting) { setSend(true); } } }, [errors]); const handleChange = (e) => { const { name, value } = e.target; setValues({...values, [name]: value, }); }; const handleSubmit = (e) => { e.preventDefault(); setErrors(validate(values)); setIsSubmiting(true); if (send) { emailjs.sendForm( "service", "templatekey", e.target, "userkey" ).then( (result) => { console.log(result.text); }, (error) => { console.log(error.text); } ); e.target.reset(); } }; return { handleChange, values, handleSubmit, errors }; }; export default useForm;

Answer 1

將 setErrors(validate(values)) 和 setIsSubmiting(true) 移動到 handleChange 后，它對我來說很好:)

const handleChange = (e) => {
const { name, value } = e.target;
setValues({
  ...values,
  [name]: value,
});
setErrors(validate(values));
setIsSubmiting(true);

};

const handleSubmit = (e) => {
e.preventDefault();
if (send) {
  console.log("WYSYŁAM");
  emailjs
    .sendForm(
      "service",
      "template",
      e.target,
      "user"
    )
    .then(
      (result) => {
        console.log(result.text);
      },
      (error) => {
        console.log(error.text);
      }
    );
  e.target.reset();
}

};

返回{句柄更改，值，句柄提交，錯誤}； };

Answer 2

我遇到了同樣的問題，發現向表單按鈕添加“onClick”事件處理程序會阻止用戶雙擊。

<button onClick={handleClick}> Submit </button>
                

在 useForm.js 我移動了setErrors(validate(values)); 和setIsSubmitting(true); 進入handleClick

function handleClick() {
    setErrors(validate(values));
    setIsSubmitting(true);
};

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

    if (send) {
        emailjs.sendForm('service', 'templateKey', e.target, 'userKey')
            .then((result) => {
                console.log(result.text);
            }, (error) => {
                console.log(error.text);
            });
        callback();
    }
};