la validación de los componentes se está manejando actualmente en un "componente base", que envuelve a los niños en un "estado de error" y les pasa accesorios inError .

Actualmente, la verificación de showErrors se realiza así:

 let showErrors = (component.hasServerErrors()) && (!hasFocus || component.type === "radio");

Básicamente, esto significa que cuando se envía una página, se ejecuta el método hasServerErrors() , que busca errores en el servidor (no manejados por la interfaz de usuario).

Esto funciona bien la primera vez que se valida una página (el usuario no selecciona una radio); los mensajes de error parecen correctos, pero debido a que hasServerErrors() solo se ejecuta al enviar la página, el estado de error persiste después de cambiar un valor.

Hice la siguiente actualización para mejorar este comportamiento:

 const [resolvedErrors, setResolvedErrors] = useState(false); let showErrors = (!resolvedErrors ? component.hasServerErrors() : false) && (!hasFocus || component.type === "radio"); const handleChange = (e: SyntheticEvent<FormInputElements>) => { handleEvent(onChange, e.currentTarget.value); if (hasFocus && showErrors) { setResolvedErrors(true); } };

Esto resolvió mi problema de "resolver" el estado de error, lo que significa que cuando un elemento tenía un error y seleccionaban una opción válida, el estado de error desaparecía. Sin embargo, no es una solución sólida, ya que si un usuario selecciona una opción válida y luego la deselecciona, esto no se selecciona y significa que el usuario ya no sabe qué elemento tiene un error.

¿Alguien puede sugerir una forma en que podría combinar showErrors y resolvedErrors en un estado conciso, para que el manejo de errores se pueda administrar correctamente?