使用错误数组反应验证输入字段

Question

我想对 HTML 输入字段应用一些验证规则，并在每次检查不通过 go 时将错误消息添加到errors state 数组中。

<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']
  });
}

以下语法不考虑组件更新次数，因此每次单击提交按钮时都会收到 4-8 条消息。 有没有办法处理errors数组中的输入字段验证（最终显示所有消息）以仅将单个值推送到数组中，然后将其删除？

Answer 1

我认为您缺少设置 state。

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
  }
}

Answer 2

可以参考这段代码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']