reactjs - 如果表单中的输入之一错误，则会打印所有错误消息-React Form

Question

我目前正在通过检查response.status是否失败来显示有关提交的错误消息，但是我不确定如何为每个错误进行映射，并且即使只有一个输入错误，我也正在打印所有错误消息。我一直想显示绿色的“您的消息已发送!”正确无误并提交后，在基本标签中输入文字。

我尝试映射错误字段，但是我不确定如何正确执行操作。我正在尝试使用error.field ==='fullName'，我认为可以。

class Contactus extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      form: {
        fullName: null,
        email: null,
        subject: null,
        message: null,
      },
      formErrors: {
        name: "",
        email: "",
        subject: "",
        message: "",
      }
    }
    this.onSubmit = this.onSubmit.bind(this)
  }
  onSubmit() {

    const { form } = this.state

    Http.post('/contact-form', { data: form }).then((response) => {
      console.log(response)

      if (response.status === 'failed') {
        this.setState({ formErrors: { name: 'error message' } })

        const errors = response.data.errors
        errors.map((error, key) => {
          error.field === 'fullName'
        }
        )
      }

    }).catch((error) => {
      console.log(error)
    })
  }

....

render() {
    const props = this.props
    const { form } = this.state
    const { formErrors } = this.state
    return (
      <React.Fragment>

        <div id="contact-us" className="container">
          <div className="row background-image">
            <div className="form col-xs-10 col-xs-offset-1 col-sm-6 col-md-6 col-lg-5">
              <form onSubmit={(e) => { e.preventDefault(); this.onSubmit(); }}>
                <h1>Contact Us</h1>
                <p>Use the contact below to get in touch with the team at the Front. We’d love to hear from you!<br />
                  <br />
                  <strong>Please note: We don’t take bookings via this website or a phone call.</strong></p>
                <span>
                  {formErrors.name !== '' && <p>Please enter Name</p>}
                </span>
                <label>
                  Full Name:
                  <input type="text" className="" name="name" placeholder="John Doe" onChange={(e) => { this.setState({ form: { ...form, fullName: e.target.value } }) }} />
                </label>
                <p></p>
                <span>
                  {formErrors.email !== '' && <p>Please enter valid email address</p>}
                </span>

.....

目前，我在上方的表单输入中以红色样式打印所有错误消息。

Answer 1

查看您的代码后，我发现了2个问题。

您只是将整个formErrors对象替换为状态，即使用此参数后，现有值将丢失:this.setState({ formErrors: { name: 'error message' } })相反，您应该使用this.setState({formErrors: { ...this.state.formErrors, name: 'error message' } })

在代码this.setState({ formErrors: { name: 'error message' } })中执行此行之后，电子邮件将变为undefined，而不是<blank>，并且您正在检查objt_code中的空白条件，并类似地检查名称。相反，您应该使用{formErrors.email !== '' && <p>Please enter valid email address</p>}

完成上述修复后，您的代码将可以正常运行。