Реагировать useState не обновляя состояния в форме отправки - PullRequest
Новая
       34

Реагировать useState не обновляя состояния в форме отправки

0 голосов
/ 29 февраля 2020 
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);
        }

    }

1 Ответ

1 голос
/ 29 февраля 2020

Установленное состояние - асинхронная c операция. Вы устанавливаете состояние, а затем проверяете его значение, которое всегда возвращает вам старое. Вот почему он возвращает 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;
}
...