Estoy construyendo una página usando React y Formik. En mi página de formulario, tengo tres formularios de Formik que se representan de forma condicional mediante una declaración de cambio. Lo estoy haciendo de esta manera porque los datos de cada formulario deben enviarse a su propio punto final de API, por lo que los mantengo separados lógicamente. Cuando se envía el primer formulario, pasa al siguiente. Tengo un problema en el que, al acceder a la propiedad de valor en el segundo formulario de Formik, muestra los valores del primero. Parece que Formik de forma predeterminada no maneja la separación de datos cuando existen varios Formik, a pesar de que existen en diferentes declaraciones de devolución.

Mi declaración de cambio es algo como esto:

 switch(currentform) { case 'form1': return ( <Formik initialValues={form1Values} onSubmit={(values, actions) => { let form1= JSON.stringify(values, null, 2); console.log(form1) }} > {({ values, setFieldValue }) => ( <Form className='form-container'> </Form> )} </Formik> ) case 'form2': return ( <Formik initialValues={form2Values} onSubmit={(values, actions) => { let form2= JSON.stringify(values, null, 2); console.log(form2) }} > {({ values, setFieldValue }) => ( <Form className='form-container'> </Form> )} </Formik> ) }

Al enviar form1 , console.log(form1) muestra los datos correctos. Después de enviar form2 , console.log(form2) devuelve los mismos datos que form1 . Intenté cambiar el nombre de los values prop en cada onSubmit pero eso no parece cambiar el comportamiento. ¿Puede alguien ayudarme a confirmar si mi implementación tiene fallas o si hay una mejor manera de configurar esto? ¡Gracias a cualquiera que lea esto!