Tengo un pequeño fragmento de código donde React-Form tiene un campo de entrada en un escenario de edición (donde necesito completar el valor y permitir que el usuario cambie el valor en el campo de entrada). Una vez que el usuario cambia el valor en el campo de entrada, necesito validarlo según mi esquema Yup.

Aquí está mi fragmento de código:

 const validator = useMemo(() => { yup.object().shape({ shareUser: yup.string() .required("Enter users separated by a semicolon.") .matches(/^([a-zA-Z0-9~!@#$%^&*()\\\-_. ]+;?)+$/, `Enter users separated by a semicolon.`), }, ) }, []); ....... const form = useForm({shareUser: null}, validator); ....... const handleChange = (event) => { setCurrentValue(event.target.value); // currentValue is a useState hook. form.formState.shareUser = event.target.value; form.dirty['shareUser'] = true; }; ............ <input name="shareUser" label="Users" form={form} defaultValue={currentValue} onChange={handleChange } />

Entonces, mi patrón permitido son cadenas no vacías como "usuario1; usuario2" o "usuario1;". Si el usuario escribe algo como "usuario1, usuario2", lo rechazaré con el error de validación: Enter users separated by a semicolon.

Sin embargo, el problema es que: cuando coloco mi validador dentro del useMemo , ¡no funciona!

Sin embargo, si muevo el validador fuera de useMemo, está funcionando.

No soy capaz de averiguar lo que me estoy perdiendo aquí.