对象空检查不工作，正在改变逻辑

Question

所以我正在做一个表单验证检查，我已经采取了'formErrors'并设置了这个对象中的错误。然而，它最初是{}，在我的代码中，我正在检查Object.keys(formErrors)。长度===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]);

所以当我提交handlessubmit()方法运行时，它有2个嵌套检查。第一个是noErrors，这是一个bool状态，检查我的对象是否为空。我已经在控制台记录了它，当组件加载时，它返回true，因为对象在开始时是{}。有什么方法可以让我检查一下，这样我就可以看到是否有一些钥匙存在于对象中?

Answer 1

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('/');
}
});
}
};