Veo que tienes problemas con JS Event Loop. Los estados de reacción se actualizarán después de que finalice un ciclo de eventos. Por lo tanto, no puede esperar que se actualicen inmediatamente en su función de controlador.

Sin embargo, existen otras soluciones, como usar setTimeout(..., 0) para engañar al bucle de eventos, que no lo ayudará en este caso.

Aquí debe refactorizar el método del controlador para manejar los estados de error en el alcance de su función y establecer el resultado final en los estados de error.

 const handleSend = (e) => { e.preventDefault(); const errors = { name: '', email: '', message: '', }; if (name === "") { errors.name = "Please enter your name"; } if (email === "") { errors.email = "Please type your email!"; } if (!email.includes("@")) { errors.email = "Invalid email address"; } if (message === "") { errors.email = "Please enter a message"; } setNameError(!!errors.name); setNameErrorMessage(errors.name); setEmailError(!!errors.email); setEmailErrorMessage(errors.email); setMessageError(!!errors.message); setMessageErrorMessage(errors.message); if (Object.values(errors).filter(Boolean).length === 0) { handleOpen(); } }

Sugiero enfáticamente refactorizar el proceso de manejo de errores en su aplicación. Su solución y la que escribí aquí no es eficiente en absoluto.

Buena suerte ;)

Haría una refactorización completa sobre cómo está manejando los errores, pero respondiendo a su pregunta, podría hacer esto:

 const handleSend = (e) => { e.preventDefault(); const isNameEmpty = name === ""; const isEmailEmpty = email === ""; const isEmailAtMissing = !email.includes("@"); const isMessageEmpty = message === ""; setNameError(isNameEmpty); setEmailError(isEmailEmpty || isEmailAtMissing); setEmailErrorMessage(isEmailEmpty ? "Please type your email!" : "Invalid email address"); setMessageError(isMessageEmpty); if ([isNameEmpty, emailError, emailError].some(value => !!value)) { handleOpen() } }

Si guarda los "errores" en las variables, se asegura de que está comprobando los últimos valores que está utilizando en los estados.

Puede usar el gancho useRef de react, ya que no es reactivo, es decir, no causa que la página se vuelva a procesar para que esté seguro

 if (!nameError && !emailError && !messageError) { handleOpen(); }

se ejecuta cuando es correcto en el orden que desea, tal como lo mostraré a continuación

 const setNameError = useRef(null); const setEmailError = useRef({value : false, message : ''}); const setMessageError = useRef(null); const handleSend = (e) => { e.preventDefault(); if (name === "") { setNameError.current = true; } if (email === "") { setEmailError.current.value = true; setEmailError.current.message = "Please type your email!"; } if (!email.includes("@")) { setEmailError.current.value = true; setEmailError.current.message = "Invalid email address"; } if (message === "") { setMessageError.current = true; } if (!setNameError.current && !setRmailError.current && !setMessageError.current) { handleOpen(); } };

he usado una mala conversión de nombres para ir con su ejemplo, pero en la vida real no setNameError para un nombre de variable como lo he hecho, pero tal vez haga nameError