Configuración de validación de errores personalizada en React.
Estoy tratando de crear una validación personalizada de errores en React.
Tengo un objeto “values” en el estado y un objeto “error” en el estado que comparten las mismas claves.
const [values, setValues] = useState({
name: "",
age: "",
city: ""
});
const [err, setErr] = useState({
name: "",
age: "",
city: ""
});
Tengo un “handleChange” muy simple y un “onSubmit” en el que quiero ejecutar mi función validadora personalizada.
const handleChange = (e) => {
setValues({
...values,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e) => {
e.preventDefault();
validateForms();
};
En mi función “validateForms”, mi teoría es que dado que ambos objetos de estado comparten las mismas claves, intento verificar si alguno de esos valores es igual a ” (cadena vacía). Si es así, voy a la clave correspondiente en el objeto “err” y establezco ese valor como error y luego hago otras cosas en JSX.
const validateForms = () => {
for (const value in values) {
if (values[value] === '') {
setErr({
...err,
value: `${value} es un campo obligatorio`
});
}
}
};
Definitivamente siento que no estoy usando “setErr” correctamente aquí. Cualquier ayuda sería maravillosa. Enlace al sandbox: https://codesandbox.io/s/trusting-bartik-6cbdb?file=/src/App.js:467-680
davy.ai
Solución
En la función
validateForms()
, estás usando la variablevalue
como una clave de propiedad para actualizar el objetoerr
, pero este enfoque es incorrecto. En su lugar, debes utilizar corchetes alrededor de la variablevalue
para acceder a la clave correcta en el objetoerr
.Aquí tienes el fragmento de código corregido para la función
validateForms()
:En resumen, necesitas crear un objeto nuevo llamado
newErrors
para almacenar los mensajes de error para cada campo. Dentro del bucle, compruebas si el valor de cada campo está vacío y, si es así, estableces el mensaje de error correspondiente en el objetonewErrors
. Finalmente, actualizas el estadoerr
con el objetonewErrors
.También, ten en cuenta que no necesitas utilizar el operador spread dentro de
setErr()
ya que estás actualizando solo un campo a la vez.¡Espero que esto te ayude!