es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Configuración de validación de errores personalizada en React.

27 May, 2023 Programación

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

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    En la función validateForms(), estás usando la variable value como una clave de propiedad para actualizar el objeto err, pero este enfoque es incorrecto. En su lugar, debes utilizar corchetes alrededor de la variable value para acceder a la clave correcta en el objeto err.

    Aquí tienes el fragmento de código corregido para la función validateForms():

    const validateForms = () => {
  let newErrors = {};
  for (const value in values) {
    if (values[value] === "") {
      newErrors[value] = `${value} es un campo obligatorio`;
    }
  }
  setErr(newErrors);
};

    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 objeto newErrors. Finalmente, actualizas el estado err con el objeto newErrors.

    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!

Comments are closed.