始终使用 Netlify 提交反应状态表单 return 404

Question

我使用 React 和 Bulma 创建了一个表单。现在我想合并 Netlify 并只使用它们的表单处理。我已经包含了 'data-netlify'='true' 和 'data-netlify-honeypot'='bot-field' 并使用了他们建议的方法来合并提取请求 onSubmit。但我总是 return 提交时出现 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 returns 所有 HTTP(s) POST 操作的 HTTP 404 状态，除了 proxy'd to another site or function（然后我们代理 POST）或匹配 URL 我们的请求期望 POST 到 - 我们在部署时收到的通知将成为表单提交的端点。

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

始终使用 Netlify 提交反应状态表单 return 404

Submitted react stateful form with Netlify always return 404

reactjs

forms

netlify