состояние не обновляется сразу - обновление только во второй раз - NEXT. JS - PullRequest
Новая
       8

состояние не обновляется сразу - обновление только во второй раз - NEXT. JS

0 голосов
/ 12 июля 2020

У меня есть форма входа с именем, адресом электронной почты и паролем. Я сделал то же самое. Мое требование: форма должна быть отправлена ​​только после успешной проверки. Проверьте код ниже: 

const [error, setError] = useState(false);
const [errorEmail, setEmailError] = useState(false);
const [errorMsg, setMsgState] = useState({
    name : "",
    email : "",
    password : ""
});
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const dispatch = useDispatch();

const handleSubmit = e => {
    e.preventDefault();

    if (name.trim() === '') {
        setError(true);
        setMsgState(prevState => ({
            ...prevState,
            name: '* Name required'
        }))
    }

    if (email.trim() === '') {
        setError(true);
        setMsgState(prevState => ({
            ...prevState,
            email: '* Email required'
        }))
    }

    if (password.trim() === '') {
        setError(true);
        setMsgState(prevState => ({
            ...prevState,
            password: '* Password required'
        }))
    }

    if (email.trim() !== '') {
        if (!/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/.test(email)) {
            setEmailError(true);
            setMsgState(prevState => ({
                ...prevState,
                email: '* Enter valid email'
            }))
        }
        else
            setEmailError(false);
    }

    if (!error && !errorEmail) {
        const user = { name, email, password };

        dispatch(authenticate(user));
    }
};

В приведенном выше коде, когда пользователь нажимает кнопку отправки в первый раз, отображаются сообщения проверки, а также отправляется форма. Во второй раз форма не отправляется, а отображаются только сообщения проверки. State is not updating immediately. Как изменить мой код, чтобы добиться этого?

1 Ответ

2 голосов
/ 12 июля 2020

добавить проверку ошибок в ловушке useEffect, 

useEffect(()=>{
    if (!error && !errorEmail) {
    const user = { name, email, password };
    dispatch(authenticate(user));
    }
},[error,errorEmail])
...