Отправлено реагировать с учетом состояния с Netlify всегда возвращать 404

Question

Я создал форму, используя React и Bulma.Теперь я хотел включить Netlify и просто использовать их обработку форм.Я включил «data-netlify» = «true» и «data-netlify-honeypot» = «bot-field» и использовал предложенный им способ включения запроса на выборку на SubSubmit.Но я всегда возвращаю 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 404 для ВСЕХ HTTP(s) POST операций, КРОМЕ тех, которые proxy'd , на другой сайт или функцию (затем мы проксируем POST) ИЛИ запросы, которые соответствуют URLмы ожидаем, что POST - тот, о котором нас уведомят во время развертывания, будет конечной точкой для отправки форм.

Как уведомить Netlify о том, что конечная точка предназначена для отправки форм?Такая ситуация обычно возникает из-за того, что у вас нет определения формы в формате обычного html или он не включает параметр формы netlify или data-netlify=true в определении html <form ...>, который мы анализируем для обнаружения конечной точки.Мы не разбираем javascript, только html.Некоторые фреймворки (я думал, что React был одним из них, но ваше использование может не привести к этому) будут создавать HTML-файлы из вашего JS и развертывать их, и мы их проанализируем.Возможно, вы захотите скачать копию вашего развертывания, чтобы подтвердить, что существует версия вашей формы в формате обычного html с конечной точкой, которую вы пытаетесь отправить в (action= параметр), указанным.На приведенном ниже снимке экрана показан значок для загрузки копии вашего развертывания со страницы журналов успешного развертывания: