0

soy nuevo en el mundo de React js, y me encontraba realizando un proyecto, con el cual, para ahorrar tiempo quise buscar cómo realizar validaciones de formularios de una forma simple y me encontré una librería llamada FORMIK que sirve justamente para esto.

La aplicación que andaba desarrollando en una AppiRestFullStack; para el back se implantó node js, con sequalize y mysql2 para la base de datos y para l front React js en su versión vite.

En el front para comunicar el back se utilizó axios. Ahora bien, realicé las validaciones a la hora de hacer nuevo registros, pero cuando me deponía hacer la opción de EDITAR se me complicó debido a que no sé como cargar los datos de la API al formulario para su posterior edición.

FORMIK para maneja algo que son los " initialValues" los cuales serían los "values" para los inputs

<Formik
        initialValues={{
          documento: '',
          nombre: '',
          correo: '',
          direccion: '',
          celular: ''
        }}>
</Formik>

Todo bien si es para realizar un nuevo registro, ya que esos valores se deben inicializar así en vacío.

El asunto es cuando quiero editar ya que quiero cargar el formulario con datos consultados de una Api

¿Qué he intentando?

He intentado de varias maneras y ninguna con éxito, aquí dejo la última que traté:

Hice un método para traer los datos a editar de un registro en especifico y que me retornara un objeto con esos valores

 useEffect(() => {
    getClienteById()

}, [])
/* set */
const getClienteById = async () => {
    let valoresIniciales = {}
    let res = await axios.get(URI + id)
    console.table(res.data);
    valoresIniciales.documento = res.data.cedCliente
    /* setDocumento(res.data.cedCliente) */
    console.log(valoresIniciales.documento)
    /* setNombre(res.data.nombre) */
    valoresIniciales.nombre = res.data.nombre
    console.log(valoresIniciales.nombre)
    /* setCorreo(res.data.correo) */
    valoresIniciales.correo = res.data.correo
    console.log(valoresIniciales.correo)
    /* setDireccion(res.data.direccion) */
    valoresIniciales.direccion = res.data.direccion
    console.log(valoresIniciales.direccion)
    /* setCelular(res.data.celular) */
    valoresIniciales.celular = res.data.celular
    console.log(valoresIniciales.celular)
    return valoresIniciales
}

Posteriormente este método lo llamé en el initialValues de Formik

<Formik
                    enableReinitialize={true}
                    initialValues={
                    getClienteById()}

                    validate={(valores) => {
                        let errores = {};

                        if (!valores.documento) {
                            errores.documento = 'Por favor ingresa un documento'
                        } else if (!expresionRegular.documento.test(valores.documento)) {
                            errores.documento = 'El documento debe tener mínimo 9 máximo 10 digitos númericos'
                        }

                        if (!valores.nombre) {
                            errores.nombre = 'Por favor ingresa un nombre'
                        } else if (!expresionRegular.nombre.test(valores.nombre)) {
                            errores.nombre = 'El nombre solo puede contener letras y espacios'
                        }

                        if (!valores.correo) {
                            errores.correo = 'Por favor ingresa un correo'
                        } else if (!expresionRegular.correo.test(valores.correo)) {
                            errores.correo = 'El correo solo puede contener letras, numeros, puntos, guiones y guion bajo.'
                        }

                        if (!valores.direccion) {
                            errores.direccion = 'Por favor ingresa un direccion'
                        } /*else if (!expresionRegular.direccion.test(valores.direccion)) {
            errores.direccion = 'El direccion debe contener @ ,.'
          }*/
                        if (!valores.celular) {
                            errores.celular = 'Por favor ingresa un celular'
                        } else if (!expresionRegular.celular.test(valores.celular)) {
                            errores.celular = 'El celular solo puede contener numeros'
                        }
                        return errores;
                    }}

                    onSubmit={(valores, { resetForm }) => {
                        actualizarCliente(valores)
                        /* cambiarFormularioEnviado(true); */
                        resetForm();
                    }}
                >

                    {({ errors, touched, initialValues }) => (
                        <section className="formulario d-flex align-items-center justify-content-center p-4 w-100">
                            <Form className="formulario-clientes row col-12 d-flex g-3 ">
                                <FormInput2
                                    classSection={"col-3"}
                                    title={"Documento:"}
                                    error={errors.documento}
                                    touched={touched.documento}
                                    tipoInput={"text"}
                                    inputId={"documento"}
                                    inputName="documento"
                                    maxlength="10"

                                />
                                <FormInput2
                                    classSection={"col-4"}
                                    title={"Nombre:"}
                                    error={errors.nombre}
                                    touched={touched.nombre}
                                    tipoInput={"text"}
                                    inputId={"nombre"}
                                    inputName="nombre"
                                />
                                <FormInput2
                                    classSection={"col-5"}
                                    title={"Correo:"}
                                    error={errors.correo}
                                    touched={touched.correo}
                                    tipoInput={"email"}
                                    inputId={"correo"}
                                    inputName="correo"
                                    
                                />
                                <FormInput2
                                    classSection={"col-5"}
                                    title={"Dirección :"}
                                    error={errors.direccion}
                                    touched={touched.direccion}
                                    tipoInput={"text"}
                                    inputId={"direccion"}
                                    inputName="direccion"
                                  
                                />
                                <FormInput2
                                    classSection={"col-4"}
                                    title={"Celular :"}
                                    error={errors.celular}
                                    touched={touched.celular}
                                    tipoInput={"text"}
                                    inputId={"celular"}
                                    inputName="celular"
                                    
                                    maxlength="10"
                                />
                                <Button clase={'form-button d-flex justify-content-center col-12'}
                                    classButton={'guardar form-button col-3'}
                                    textButton={'Guardar'} type={'submit'} />
                            </Form>
                        </section>
                    )}
                </Formik>

Por si algo, dejo lo que hay en el componente FormInput2:

 import { ErrorMessage, Field } from "formik";
 import React from "react";

 export const FormInput2 = ({ value, onChange, classSection, infomacionInput, inputId, error, 
 touched, classInput, tipoInput, inputName,
 inputPlaceholder, expresionRegular, title,
 maxlength }) => {



 return (
 <>

  <section className={" " + classSection}>
    <h3 className={!(error && touched) ? "text-white fs-5" : "text-danger fs-5"}>{title}</h3>
    <Field
      className={!(error && touched) ? classInput + " form-control item-form " : "form-control item-form border border-danger border-3 rounded-4"}
      type={tipoInput}
      id={inputId}
      name={inputName}
      placeholder={inputPlaceholder}
      maxLength={maxlength}
    />
    <ErrorMessage name={inputName} component={() => (<p className="textoError text-danger">{error}</p>)} />
  </section>
</>
 );
 };

Al verificar si funcionaba me di cuenta que muestra los datos por consola, pero no los trae al formulario:

introducir la descripción de la imagen aquí

Ahí es donde me quedé, espero puedan ayudarme, gracias.

1 respuesta 1

0

Ya logré encontrar una solución, se las comparto por si algún día lo llegan necesitar.

Resulta que solo era crear una variable de estado dentro de una función y esta llamarla luego en el useEfect de la siguiente manera:

const [initialValues, setInitialValues] = useState("");    
 const getClienteById = async () => {
        try {
            const res = await axios.get(uriClientes + id)
            console.table(res.data)
            setInitialValues({
               cedCliente:res.data.cedCliente,
               nombre:res.data.nombre,
               correo:res.data.correo,
               direccion:res.data.direccion,
               celular:res.data.celular
            });
        } catch (error) {
            console.error("Error al cargar los datos: "+error);
        }
    }

Se invoca en el useEffect para que cargue los datos:

useEffect(() => {
        
        getClienteById()
    }, [uriClientes])

Y luego en el Formik se coloca en el initialValues la variable de estado "initialValues"

<Formik
       enableReinitialize={true}
       initialValues={initialValues}
       >
</Formik>

Y con esto debería bastar para que te cargue al formulario los datos que traigas de una Api: introducir la descripción de la imagen aquí Espero les sirva, saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.