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:
Ahí es donde me quedé, espero puedan ayudarme, gracias.