反应表单验证问题

Question

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

，请使用 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);

反应表单验证问题

React Form Validation Issue

forms

validation

reactjs