Estoy trabajando en React basado en el código NextJS.
Si ingreso valores manualmente en los campos del formulario y envío el formulario, obtengo todos los valores en la función del componente.
Pero si muestro dinámicamente valores en un campo de formulario como value={query.campaignid} , el componente no recopila ningún valor.
import { Button, Input } from "@chakra-ui/react"; import { Field, Form, Formik } from "formik"; import { useRouter } from "next/router"; export default function FormikExample() { const { query } = useRouter(); return ( <> <Formik initialValues={ { // campaignid: " ", } } onSubmit={(values) => { setTimeout(() => { console.log(values); }); }} > {(props) => ( <Form> <Field name="campaignid"> <Input value={query.campaignid} /> </Field> <Button id="submited" isLoading={props.isSubmitting} type="submit"> Submit </Button> </Form> )} </Formik> </> ); }¡Resuelto!
Pasé la consulta de URL a initialValues y agregué enableReinitialize={true} a continuación:
... initialValues={{ campaignId: query.campaignid, }} enableReinitialize={true} ...En el valor de entrada pasé esos accesorios:
<Field name="campaignid"> <Input value={props.values.campaignId} /> </Field>