Me gustaría aplicar algunas reglas de validación a un campo de entrada HTML y agregar el mensaje de error a la matriz de estado de errors cada vez que no se realiza la verificación.
<input name="email" type="email" value={ email } placeholder="Type your email address here..." onChange={ handleChange } /> <button className="Form_Submit" onClick={ handleSubmit } > <i className="fas fa-arrow-right" /> </button> handleSubmit() { const { values: { email = '', errors = [] } = {} } = this.state; if (!validateEmailAddress(email)) { errors.push('Please provide a valid e-mail address'); } if (isEmpty(email)) { errors.push('Email address is required'); } } if (!validateEmailAddress(email)) { this.setState({ errors: [...errors, 'Please provide a valid e-mail address'] }); } if (isEmpty(email)) { this.setState({ errors: [...errors, 'Email address is required'] }); } La siguiente sintaxis no toma la cantidad de veces que se actualizan los componentes, por lo que termino con 4-8 mensajes cada vez que hago clic en el botón Enviar. ¿Hay formas de manejar la validación del campo de entrada en la matriz de errors (para mostrar todos los mensajes al final) para insertar solo un valor en una matriz y luego eliminarlo?
Creo que te estás perdiendo el estado de configuración.
handleSubmit() { const { values: { email = '', errors = '' } = {} } = this.state; if (!validateEmailAddress(email) && !errors.contains('Please provide a valid e-mail address')) { errors.push('Please provide a valid e-mail address') } if (!!email && !errors.contains('Email address is required')) { errors.push('Email address is required'); } setValues({...rest, errors}); if (!errors.length) { doFunc(); //your expected function } }Puede consultar este código https://www.codegrepper.com/code-examples/javascript/push+unique+values+in+array+javascript
const myArray = ['a', 1, 'a', 2, '1']; const unique = [...new Set(myArray)]; // ['a', 1, 2, '1']Establecer en javascript almacena valores únicos para que sea útil. Puede aplicar el siguiente código
const errorSet = new Set([...this.state.errors]); if (!validateEmailAddress(email)) { errorSet.add('Please provide a valid e-mail address'); } if (isEmpty(email)) { errorSet.add('Email address is required'); } this.setState({ errors: [...errorSet] });