下面的函式總是在組件的第一次渲染時提交表單，即使firstName和lastName域是空的。
const [formErrors, setFormErrors] = useState({}) 。
const registerUser = (/span>) => {
if (firstName ==""/span>) {
setFormErrors((prev) => {
return { ... prev, firstName: "Firstname is required!" };
});
}
if (lastName === "") {
setFormErrors((prev) => {
return { ... prev, lastName: "Lastname is required!" };
});
}
if (Object.keys(formErrors).length ==0) {
console.log("Form Submitted") 。
} else {
console.log("Failed") 。
}
在第一次渲染時，Object.keys(formErrors).length的值是0，但是錯誤卻顯示在螢屏上，奇怪！
我試著使用useRef，它起作用了，但是它沒有在螢屏上顯示錯誤，因為這個組件沒有用useRef重新渲染。
如果錯誤仍然存在，我怎樣才能防止這個表單被提交呢？
謝謝你
uj5u.com熱心網友回復：
你的問題是，你呼叫了設定狀態（formErrors），然后你試圖立即讀取它。所以當你設定它時，它還沒有被更新，你正在讀取陳舊的資料。
為了解決這個問題，在該函式中使用一些區域變數（最初你可能想用狀態資料初始化它）來跟蹤錯誤，然后在最后當你完成它時，將其放入狀態。
像這樣
的東西const registerUser=（/span>）=> {
let errors = {
...formErrors
}
if (firstName === "") {
errors.firstName = "firstname is required!" .
}
if (lastName == "") {
errors.lastName = "lastName is required!"
}
if (Object.keys(errors).length ==0) {
console.log("Form Submitted") 。
} else {
console.log("Failed") 。
}
setFormErrors(errors)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/311818.html
標籤：