状态不立即更新 - 仅在第二次更新 - NEXT.JS

Question

我有一个包含姓名、电子邮件和密码的登录表单。我已经完成了同样的验证。我的要求是，只有在验证成功后才能提交表单。检查下面的代码，

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。如何更改我的代码以实现这一目标？

Answer 1

在 useEffect 钩子中添加错误检查，

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