布尔状态值在第二次提交时更改为未定义

Question

我正在研究一个 React 项目并实施电子邮件验证，并在未通过时将状态设置为 true，在通过时将状态设置为 false。验证部分有效，但在第二次 onSubmit 时出现未定义状态。

更多细节：我正在检查 onChange 和 onSubmit 的状态。 onChange 似乎按预期工作。 onSubmit 确实在第一个 click/submit 上起作用，但在下一个 click/submit 上起作用，它将状态更改为 'undefined'，我不知道为什么。

最好 view my codepen 开始填写电子邮件字段并在我记录状态时检查控制台。

这是代码片段：

this.state = {
  inputs: {
    name: '',
    email: '',
    message: '',
  },
  show: true,
  errors: {
    name: false,
    email: false,
    message: false,
  },
};

validateEmail(email) {
const re = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}

handleOnChange = e => {
const { name, value } = e.target;

const emailInput = e.target.value;
const emailValid = this.validateEmail(emailInput);

if (name === 'email') {
  this.setState({
    inputs: {
      email: emailInput,
    },
    errors: {
      email: !emailValid,
    },
  });
} else {
  this.setState({
    inputs: {
      ...this.state.inputs,
      [name]: value,
    },
    errors: {
      ...this.state.errors,
      [name]: false,
    },
  });
}

console.log('errors.email onChange = ' + this.state.errors.email);
};

那么，为什么会这样？我该如何解决？

Answer 1

当字段不为空时，您错过了 else 条件。这将从状态中删除错误对象键，即给你 undefined 错误。

像这样重写 handleSubmit 函数。

    handleSubmit = (e, slackPost) => {
    e.preventDefault();

     console.log('errors.email onClick = ' + this.state.errors.email);

    let inputFields = document.getElementsByClassName('form-input');
    let invalidEmailMessage = document.querySelector('#invalid-email-message');
    let failMessage = document.querySelector('#fail-message');
    let failMessageBox = document.querySelector('.alert-fail');

    // empty array to house empty field names
    const emptyFieldNames = [];

    // empty object to house input state
    let errors = {};

    // loop through input fields...
    for (var i = 0; i < inputFields.length; i++) {
      if (inputFields[i].value === '') {
        let inputName = inputFields[i].name;
        // add name to new array
        emptyFieldNames.push(inputFields[i].getAttribute('name'));
        // add input name and value of true to new object
        errors[inputName] = true;
        failMessageBox.style.display = 'block';
      } else {
        let inputName = inputFields[i].name;
          errors[inputName] = false;
      }
    }
    debugger;
    this.setState({ errors });

    if (emptyFieldNames.length > 0) {
      failMessage.innerHTML =
        'Please complete the following field(s): ' + emptyFieldNames.join(', ');
    } else if (this.state.errors.email === true) {
      invalidEmailMessage.innerHTML = 'Please enter a valid email';
    } else {
      console.log('For Submitted!');
    }

  };

布尔状态值在第二次提交时更改为未定义

Boolean State Value Changes to Undefined on Second onSubmit

javascript

boolean

email-validation

setstate