React useState未更新提交表单上的状态

Question

const [user, setuser] = useState({
fName: '', lName: '', password: '', email: '', username: ''
})
const [fNameError, setfNameError] = useState('');
const [lNameError, setlNameError] = useState('');
const [emailError, setemailError] = useState('');
const [passwordError, setpasswordError] = useState('');
const [usernameError, setusernameError] = useState('');
const changeHandler = (e) => {
setuser({
...user, [e.currentTarget.name]: e.currentTarget.value
})
}
const inputChecker = () => {
user.fName === '' || user.fName.length < 3 ? setfNameError('invalid') : setfNameError('valid');
user.lName === '' || user.lName.length < 3 ? setlNameError('invalid') : setlNameError('valid');
user.username === '' || user.username.length < 5 ? setusernameError('invalid') : setusernameError('valid');
user.password === '' || user.password.length < 6 ? setpasswordError('invalid') : setpasswordError('valid');
validateEmail(user.email) ? setemailError('valid') : setemailError('invalid');
if (fNameError == 'valid' && lNameError == 'valid' && emailError == 'valid' && passwordError == 'valid' && usernameError == 'valid') {
if (fNameError == 'valid') {
return true
}
return false
}
const submitHandler = (e) => {
e.preventDefault();
//

在提交表单并在所有错误时调用submitHandler时在inputChecker函数中是否有效我需要inputChecker返回true，但第一次单击时返回false，即使所有选项都有效，但当我第二次点击它时，它返回true，下面的检查有效

//有人能告诉我做错了什么吗

if (inputChecker()) {
console.log(user);
}
}

Answer 1

设置状态为异步操作。您正在设置状态，然后检查其值，该值将始终返回旧值。这就是它第二次返回真值的原因。

按照以下方式重新编写代码，然后再次检查。

const inputChecker = () => {
let isFNameValid = true;
let isLNameValid = true;
let isUsernameValid = true;
let isPasswordValid = true;
let isEmailValid = true;
if(user.fName === '' || user.fName.length < 3) {
setfNameError('invalid');
isFNameValid = false;
}  
else {
setfNameError('valid');
isFNameValid = true;
}
if(user.lName === '' || user.lName.length < 3) {
setlNameError('invalid');
isLNameValid = false;
}  
else {
setlNameError('valid');
isLNameValid = true;
}
if(user.username === '' || user.username.length < 5) {    
setusernameError('invalid');
isUsernameValid = false;
}  
else {
setusernameError('valid');
isUsernameValid = true;
}
if(user.password === '' || user.password.length < 6) {    
setpasswordError('invalid');
isPasswordValid = false;
}  
else {
setpasswordError('valid');
isPasswordValid = true;
}

if(validateEmail(user.email)) {
setemailError('valid');
isEmailValid = true;
} 
else {
setemailError('invalid');
isEmailValid = false;
}

if (isFNameValid && isLNameValid && isUsernameValid && isPasswordValid && isEmailValid) {
return true;
} else 
return false;
}