Reactjs React Netlify表单未提交

我正在制作一个个人培训网站，我想使用Netlify表单提交进行

/contact

URL，我尝试添加了

Netlify

，

Netlify='true'

，以及其他类似的内容，但每次尝试使用Netlify表单提交时，我都会给出404错误，但无论我做什么，它似乎都不起作用，我遵循了一些教程和回购协议，但仍然不起作用。它只给出404错误和其他东西； 请查看我的github回购协议

这是我的

Contact.js

组件

import React, { Fragment, useState } from 'react';
import '../../App.css';
const encode = (data) => {
  return Object.keys(data)
    .map((key) => encodeURIComponent(key) + '=' +         encodeURIComponent(data[key]))
.join('&');
};
const Contact = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({
        'form-name': 'contact',
          name: name,
           email: email,
          text: text,
          }),
        })
        .then((res) => {
        console.log(res);
      })
     .catch((error) => alert(error));

     e.preventDefault();
    };
 return (
   <Fragment>
  <div className='contact'>
    <div className='contact-wrapper'>
      <div className='title'>
        <span>Contact me</span>
      </div>
      <div className='contact-form'>
        <form
          className='myform'
          method='POST'
          name='contact'
          data-netlify='true'
          onSubmit={(e) => handleSubmit(e)}
        >
          <input type='hidden' name='form-name' value='contact'></input>

          <input
            type='text'
            placeholder='Your Name'
            name='name'
            value={name}
            onChange={(e) => setName(e.target.value)}
          ></input>
          <input
            type='email'
            placeholder='Your E-Mail'
            name='email'
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          ></input>
          <textarea
            placeholder='Your message'
            name='message'
            value={text}
            onChange={(e) => setText(e.target.value)}
          ></textarea>
          <button type='submit'>Send</button>
        </form>
      </div>
    </div>
     </div>
   </Fragment>
   );
};

export default Contact;

import React，{Fragment，useState}来自'React'；
导入“../App.css”；
常量编码=（数据）=>{
返回Object.keys（数据）
.map（（键）=>encodeURIComponent（键）+'='+encodeURIComponent（数据[key]））
.加入（“&”）；
};
常量联系人=（）=>{
const[name，setName]=useState（“”）；
const[email，setEmail]=useState（“”）；
const[text，setText]=useState（“”）；
常量handleSubmit=（e）=>{
获取（“/”{
方法：“POST”，
标题：{'Content Type'：'application/x-www-form-urlencoded'}，
正文：编码({
“表单名称”：“联系人”，
姓名:姓名,，
电邮:电邮,，
文本：文本，
}),
})
。然后（（res）=>{
控制台日志（res）；
})
.catch（（错误）=>警报（错误））；
e、 预防默认值（）；
};
返回(
联系我
handleSubmit（e）}
>
setName（e.target.value）}
>
setEmail（e.target.value）}
>
setText（e.target.value）}
>
邮寄
);
};
导出默认联系人；

---

Netlify的表单通过其服务器在部署时编辑html来添加用于提交表单的钩子

对于React应用程序，表单在部署时不会在html中可见，因此这将不起作用

---

Netlify有一个关于如何使用SPA设置表单的指南，请在此处查看：

经过长期研究，我发现了这一点，我刚刚在我的

public/index.html

中添加了一个静态表单，它成功了！现在，我正在尝试实现recaptcha，但感谢您回答我的问题