Question

我已经在React中创建了一个联系表单，现在一切正常，期待一件事。当表单为空并且我单击发送按钮时，它将引发错误。

错误：

{ "message": "Network Error"
, "name": "Error"
, "stack": "Error: Network Error\n at createError (http://localhost:3000/static/js/bundle.js:16606:15)\n at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:16149:14)"
, "config":
  { "url": "https://formcarry.com/s/Ek8wZYC7v0H"
  , "method": "post"
  , "data": "{\"name\":\"\",\"surname\":\"\",\"email\":\"\",\"message\":\"\"}"
  , "headers":
     { "Accept": "application/json"
     , "Content-Type": "application/json;charset=utf-8"
     }
  , "transformRequest": [null]
  , "transformResponse": [null]
  , "timeout": 0
  , "xsrfCookieName": "XSRF-TOKEN"
  , "xsrfHeaderName": "X-XSRF-TOKEN"
  , "maxContentLength": -1
  }
}

ContactPage.js（这是我导入ContactForm.js的位置）：

  <LayoutWrapperMain className={css.staticPageWrapper}>

  <h1 className={css.pageTitle}>Need help? Ask our experts for any help you need.</h1>

  <div className={css.contentWrapper}>

  <ContactForm />

  <GoogleMap />

  </div>

  </LayoutWrapperMain>

ContactForm.js：

import React from "react";
import axios from "axios"; // For making client request.

class ContactForm extends React.Component {
  constructor(props){
    super(props);
    this.state = {name: "", surname: "", email: "", message: ""};
  }

  handleForm = e => {
    axios.post(
      "https://formcarry.com/s/Ek8wZYC7v0H", 
      this.state, 
      {headers: {"Accept": "application/json"}}
      )

      .then(function (response) {
        let successMessage = document.querySelector('.success-message');
        successMessage.innerHTML = JSON.stringify(response.data.title);
      })
      .catch(function (error) {
        let errorMessage = document.querySelector('.error-message');
        errorMessage.innerHTML = JSON.stringify(error);
      });

    e.preventDefault();
    this.setState({name: '', surname: '', email: '', message: ''}) // <= here
  }
    handleFields = e => this.setState({ [e.target.name]: e.target.value });  

  render() {
    return (

      <form onSubmit={this.handleForm}>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" onChange={this.handleFields} value={this.state.name} />

        <label htmlFor="surname">Surname</label>
        <input type="text" id="surname" name="surname" onChange={this.handleFields} value={this.state.surname} />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" onChange={this.handleFields} value={this.state.email} />

        <label htmlFor="message">Your Message</label>
        <textarea name="message" id="message" onChange={this.handleFields} value={this.state.message}></textarea>

        <button id="how-button" type="submit">Send</button>

          <div className="success-message">
            <label></label>
          </div>

          <div className="error-message">
            <label></label>
          </div>

      </form>
    );
  }
}

export default ContactForm;

因此，该表单可以正常工作，并且在填充所有字段之后，它会以正确的方式引发成功消息，但是当表单为空时，它将引发我发布的错误。

错误可能是什么？ 我有一个在线网站，因此您可以自己对其进行测试：

DataFrame.stack

Answer 1

是否要允许发布空白字段？一个简单的解决方法是使字段为必填字段，例如：

<input required type="text" id="name" name="name" onChange={this.handleFields} value={this.state.name} />

Answer 2

BE服务正在返回403状态代码。

关于页面上的错误输出，看来您正在打印整个错误对象。

let errorMessage = document.querySelector('.error-message');
errorMessage.innerHTML = JSON.stringify(error);

您应该只打印以下消息：error.message。

我将确保使用输入字段上的required attr来防止出现空状态。

以下一些有关表单验证的文档可能会有用： https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

联系表格发送按钮抛出错误

2 个答案: