EmailJs 和表单验证问题，React

Question

I've got a problem with sending emails in React by EmailJs. When i validate form and all the errors desapears, form is sending email only after second click and i dont really know why this is happening why. Please help

 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

After moving setErrors(validate(values)) and setIsSubmiting(true) to handleChange it works fine for me:)

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();
}

};

return { handleChange, values, handleSubmit, errors }; };

Answer 2

I ran into the same problem and found that adding an 'onClick' event handler to your form button will prevent the user from needing to double click.

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

in useForm.js I moved setErrors(validate(values)); and setIsSubmitting(true); into 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();
    }
};