所以我正在做一個表單驗證檢查，我已經采取了“formErrors”并在這個物件中設定了錯誤。但是它最初是 {} 并且在我的代碼中我正在檢查 Object.keys(formErrors).length===0 ，它甚至回傳 true {}
const [formValues, setFormValues] = useState(initialValues);
const [formErrors, setFormErrors] = useState({});
const handleChange = (e) => {
const { name, value } = e.target;
setFormValues({ ...formValues, [name]: value });
};
const url = '/collectdetails';
const handleSubmit = (e) => {
e.preventDefault();
setFormErrors(validate(formValues));
// setIsSubmit(true);
console.log(noErrors);
if (noErrors) {
const { fullName, phoneNumber, emailAddress, role, lookingFor, company } =
formValues;
const data = {
Name: fullName,
MobileNumber: phoneNumber,
Email: emailAddress,
Role: role,
LookingFor: lookingFor,
CompanyName: company,
};
getDetails(url, data).then((user) => {
const { Response } = user;
if (Response === 'OK') {
setCurrentUser(phoneNumber);
navigate('/');
}
});
}
};
useEffect(() => {
if (Object.keys(formErrors).length === 0) {
console.log(formErrors);
setNoErrors(true);
}
}, [formErrors]);
因此，當我提交 handleSubmit() 方法時，它有 2 個嵌套檢查。第一個用于 noErrors，它是一個布爾狀態，用于檢查我的物件是否為空。我有控制臺記錄它，當組件加載時它回傳 true，因為物件是 {} 在開始。有什么辦法讓我檢查一下，以便我可以查看物件中是否存在一些鍵？
uj5u.com熱心網友回復：
useEffect每次您的formErrors物件更改時都會運行。這包括第一次渲染。
將useEffect邏輯放在提交處理程式中可能會更好。formErrors 狀態物件似乎只是為您充當臨時存盤，因為setNoErrors(true)如果填充了它，您會立即呼叫它：
const [formValues, setFormValues] = useState(initialValues);
const handleChange = (e) => {
const { name, value } = e.target;
setFormValues({ ...formValues, [name]: value });
};
const url = '/collectdetails';
const handleSubmit = (e) => {
e.preventDefault();
// just store in a normal variable
const errors = validate(formValues);
// setIsSubmit(true);
console.log(noErrors); // this isn't defined in your code
// just check the errors object for keys
if (Object.keys(errors).length === 0) {
// errors object is empty
console.log(errors);
setNoErrors(true);
const { fullName, phoneNumber, emailAddress, role, lookingFor, company }
= formValues;
const data = {
Name: fullName,
MobileNumber: phoneNumber,
Email: emailAddress,
Role: role,
LookingFor: lookingFor,
CompanyName: company,
};
getDetails(url, data).then((user) => {
const { Response } = user;
if (Response === 'OK') {
setCurrentUser(phoneNumber);
navigate('/');
}
});
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/494010.html
標籤：javascript 反应