Estoy enviando un formulario usando Formik. Quiero tener una lógica de validación ligeramente diferente dependiendo de si se desencadena por eventos de desenfoque/cambio o validación previa al envío. (En pocas palabras, durante el envío previo, solo quiero ejecutar la validación de sincronización: mi back-end hará la misma validación asíncrona que ejecuto en el desenfoque/cambio cuando envío el formulario, por lo que quiero omitirlo en el envío previo .) Mi función de validación se parece a esto:
validate={(value) => { const error = validateSync(value); if (!error && !form.isSubmitting) { return validateAsync(value); } return error; }}
En este caso, estoy usando useFormikContext
para obtener form.isSubmitting
.
De acuerdo con los documentos de Formik sobre el envío, isSubmitting
debe establecerse en true
inmediatamente en la etapa previa al envío , antes de la etapa de validación . Esto no parece estar sucediendo, como puede ver si intenta enviar el formulario en este entorno limitado (verifique la consola para ver que tanto isSubmitting
como isValidating
son false
; de acuerdo con los documentos de Formik, ambos deberían ser true
en este escenario).
Otro usuario tenía una pregunta similar , pero la respuesta no aborda el (posible) error subyacente con Formik.
Usé el gancho useRef de React para hacer referencia a la versión actual del formulario:
const form = useFormikContext(); const formRef = useRef(); formRef.current = form; // within a delayed callback: function delayedCallback() { // pulls the current value of isSubmitting, whenever the delayedCallback fires const { isSubmitting } = formRef.current; };
Funciona al 100%