时间戳

首页 > 解决方案 > React useState 不更新提交表单上的状态

reactjs - React useState 不更新提交表单上的状态

问题描述

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

        //

如果 inputChecker 函数中的所有错误都有效，则在提交表单并调用 submitHandler 时，我需要 inputChecker 返回 true，但即使所有错误都有效，它也会在第一次单击时返回 false，但是当我第二次单击它时，它会返回 true 并且低于检查作品

// 谁能告诉我我做错了什么

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

    }

标签： reactjsbootstrap-4next.js

解决方案

设置状态是异步操作。您正在设置状态，然后检查其值，这将始终返回旧状态。这就是它第二次返回 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;
}

推荐阅读