电子邮件Js和表单验证问题，React

Question

我在React by EmailJs中发送电子邮件时遇到问题。当我验证表单并消除所有错误时，表单只在第二次点击后才发送电子邮件，我真的不知道为什么会发生这种情况。请帮助

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

}；

return｛handleChange，values，handleSubmit，errors｝；}；

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