React Form Validation Issue

Question

我不知道我的代码出了什么问题，我用console.log检查了值，它正常地得到了值，但当我提交表单时，它又回到了未定义的状态，当我尝试用if语句检查表单时，如果只是用空值发送邮件，有时它会发送未定义的

const [mails, setMails] = useState({
userFullName: '',
userEmail: '',
userSubject: '',
userMessage: '',
mailFail : false,
});
const [mailStatues, setMailStatues] = useState(false);
const [mailLoader, setMailloader] = useState(false);

const { userFullName, userEmail, userSubject, userMessage, mailFail } = mails;
const handleChange = e => {
setMails({ ...mails, [e.target.name] : e.target.value})
}
function setFail() {
setMails({ mailFail: true })
setTimeout(() => {
setMails({ mailFail: false })
}, 3000);
}
const handleEmail = async (e) => {
e.preventDefault();
console.log(userFullName , userEmail, userSubject, userMessage)
if ( userFullName ) {
setFail()
}

else {
setMailloader(true);
await axios.post('http://localhost:8000/api/form', { 
...mails
},
setMails({
userFullName: '',
userEmail: '',
userSubject: '',
userMessage: '',
})
, 
setMailloader(false)
,
setMailStatues(true)
)
}
}

这是表格

<form onSubmit={handleEmail}>
<Input id='inputName' type="text" name="userFullName" label="Name" value={userFullName} change={handleChange} />
<Input id='inputEmail' type="email" name="userEmail" label="Email" value={userEmail} change={handleChange}/>
<Input id='inputSubject' type="text" name="userSubject" label="Subject" value={userSubject} change={handleChange}/>
<TextArea id='inputMessage' type="text" name="userMessage" label="Message" value={userMessage} change={handleChange}/>
<BtnAni string="Submit" loading={mailLoader}/>

</form>

Answer 1

更改这些行

setMails({ mailFail: true })
setTimeout(() => {
setMails({ mailFail: false })
}, 3000);

至

setMails(prev => ({ ...prev, mailFail: true }))
setTimeout(() => {
setMails(prev => ({ ...prev, mailFail: false }))
}, 3000);