React表單驗證問題-有解無憂

我不知道我的代碼有什么問題，我用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>

uj5u.com熱心網友回復：

更改這些行

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

到

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/435516.html

標籤：反应形式验证

上一篇：如何通過Golang跳過空陣列的json驗證

下一篇：用于狀態檢查的序列化程式