React useState 不更新提交表单上的状态答案

【问题标题】：React useState not updating the states on submit formReact useState 不更新提交表单上的状态
【发布时间】：2020-02-29 17:08:00
【问题描述】：

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);
        }

    }

【问题讨论】：

设置状态为异步操作。您正在设置状态，然后检查其值，这将始终返回旧状态。这就是它第二次返回 true 的原因。
请你告诉我怎么做，因为我还是不明白...@MazharHaque
我已添加代码作为答案。请检查一下。
非常感谢您的帮助！ @MazharHaque

标签： reactjs bootstrap-4 next.js

【解决方案1】：

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

重构您的代码如下，并再次检查。

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;
}

【讨论】：