reactjs - 使用 Netlify 提交的反应状态表单总是返回 404

Question

我使用 React 和 Bulma 创建了一个表单。现在我想合并 Netlify 并使用他们的表单处理。我已经包含了 'data-netlify'='true' 和 'data-netlify-honeypot'='bot-field' 并使用了他们建议的方式来合并获取请求 onSubmit。但我总是在提交时返回 404，我不知道为什么。任何帮助将不胜感激。

我已经尝试了 Netlify 建议的所有步骤。至少我认为我有。

import React, { Component } from 'react';
import 'bulma/css/bulma.css';
import '../css/ContactFormAndFooter.css';
import Fade from 'react-reveal/Fade';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faEnvelope, faPhone } from '@fortawesome/free-solid-svg-icons';

const encode = (data) => {
return Object.keys(data)
      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
      .join("&");
}

class ContactInfoForm extends Component {
  constructor(props) {
    super(props)

    this.state = {
      'name': '',
      'email': '',
      'phone': '',
      'details': ''
    }
  }

  handleInputChange = e => this.setState({ [e.target.name]: e.target.value })

  handleSubmit = (e) => {
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", ...this.state })
    })
      .then(() => {
        this.setState({
          name: '',
          email: '',
          phone: '',
          details: ''
        });
        alert('Success!');
      })
      .catch(error => alert(error));

    e.preventDefault();
  }

  render() {
    const { name, email, phone, details } = this.state;
    return (
      <section className='section contact-section'>
        <Fade left>
          <h3 className='title is-3'>Please introduce yourself and tell me a little bit about your project</h3>
        </Fade>
        <Fade right>
          <div className='container is-centered card box contact-container'>
            <form 
              name='contact' 
              method='POST' 
              onSubmit={this.handleSubmit} 
              data-netlify-honeypot='bot-field' 
              data-netlify='true'
            > 
              <input type="hidden" name="form-name" value="contact" />
              <p className="hidden">
                <label>Don’t fill this out if you're human: <input name="bot-field" /></label>
              </p>
              <div className='field'>
                <div className='control has-icons-left'>
                  <input 
                    className='input has-text-weight-light' 
                    name='name' 
                    type='text'
                    value={name}
                    onChange={this.handleInputChange}
                    placeholder='First and Last Name' 
                  />
                  <span className='icon is-small is-left'>
                    <FontAwesomeIcon icon={faUser} style={{'color':'#4B0082'}} />
                  </span>
                </div>
              </div>
              <div className='field'>
                <div className='control has-icons-left'>
                  <input 
                    className='input has-text-weight-light' 
                    name='email' 
                    type='email' 
                    value={email}
                    onChange={this.handleInputChange}
                    placeholder='Email' 
                  />
                  <span className='icon is-small is-left'>
                    <FontAwesomeIcon icon={faEnvelope} style={{'color':'#4B0082'}} />
                  </span>
                </div>
              </div>
              <div className='field'>
                <div className='control has-icons-left'>
                  <input 
                    className='input has-text-weight-light' 
                    name='phone' 
                    type='number' 
                    value={phone}
                    onChange={this.handleInputChange}
                    placeholder='Phone Number'
                  />
                  <span className='icon is-small is-left'>
                    <FontAwesomeIcon icon={faPhone} style={{'color':'#4B0082'}} />
                  </span>
                </div>
              </div>
              <div className='field'>
                <label className='label has-text-grey-light has-text-weight-light'>Project Description</label>
                <div className='control'>
                  <textarea 
                    className='textarea' 
                    name='details' 
                    value={details} 
                    onChange={this.handleInputChange}
                  />
                </div>
              </div>
              <div className="control has-text-centered">
                <button className='button has-text-white' type='submit'>Submit</button>
              </div>
            </form>
          </div>
        </Fade>
      </section>
    )
  }
}

export default ContactInfoForm;

标签： reactjsformsnetlify

Answer 1

404 几乎肯定会发生，因为 Netlify 没有检测到该表单。NetlifyHTTP(s) POST为所有操作返回 HTTP 404 状态，除了那些被代理到另一个站点或函数（然后我们代理 POST）或与我们期望 POST 的 URL 匹配的请求 - 我们在部署时收到通知的请求time 将是表单提交的终点。

如何通知 Netlify 端点用于表单提交？这种情况通常会发生，因为您没有纯 html 表单定义，或者它没有在 html 定义中包含netlifyor data-netlify=trueform 参数<form ...>，这是我们解析以发现端点的内容。我们不解析 javascript，只解析 html。一些框架（我认为 React 是其中之一，但您的使用可能不会导致这种情况）将从您的 JS 中创建 html 文件并部署它们，我们将解析它们。您可能需要下载您的部署副本，以确认您的表单有一个纯 html 版本，并指定了您尝试发布到（action=参数）的端点。下面的屏幕截图显示了从任何成功部署的日志页面下载部署副本的图标：