使用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;

Answer 1

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

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