react-hook-forms & Netlify.不传递表单数据

Question

我刚刚花了几个小时，试图让验证和网络很好地协同工作......验证有效，表单提交正常。但是，它似乎没有发送任何表单数据。

我的表单组件是：

import React from 'react'
import { useForm } from 'react-hook-form'
import { navigate } from 'gatsby'
function encode(data) {
return Object.keys(data)
.map(
key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
)
.join('&')
}
const ContactForm = () => {
const { register, handleSubmit, errors, reset } = useForm({
mode: 'onChange',
})
const [state, setState] = React.useState({})
const handleChange = e =>
setState({ ...state, [e.target.name]: e.target.value })
const onSubmit = (data, e) => {
e.preventDefault()
const form = e.target
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': 'react-validation-form',
body: data,
}),
})
.then(response => {
reset()
navigate(form.getAttribute('action'))
console.log(response)
})
.catch(error => {
console.log(error)
})
}
return (
<div className="flex justify-center">
<form
onSubmit={handleSubmit(onSubmit)}
name="react-validation-form"
method="POST"
data-netlify="true"
data-netlify-honeypot="bot-field"
className="w-full sm:w-2/3"
action="/"
id="contactForm"
>
<label className="block text-xs uppercase font-sans font-bold mb-2 text-gray-700">
Full Name:
</label>
<input
name="fullName"
type="text"
placeholder="Your name please"
ref={register({ required: true })}
className="mb-4 shadow appearance-none border rounded-lg w-full py-4 px-3 text-gray-700 leading-wider font-sans text-sm focus:outline-none focus:shadow-outline"
/>
{errors.fullName && (
<div
class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative text-xs font-sans mb-4"
role="alert"
>
<strong class="font-bold mr-2">Holy smokes!</strong>
<span class="block sm:inline">
Something seriously bad happened.
</span>
</div>
)}
<label className="block text-xs uppercase font-sans font-bold mb-2 text-gray-700">
Email
</label>
<input
name="email"
type="email"
placeholder="I wont spam you promise"
ref={register({
required: true,
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i,
},
})}
className="mb-4 shadow appearance-none border rounded-lg w-full py-4 px-3 text-gray-700 leading-wider font-sans text-sm focus:outline-none focus:shadow-outline"
/>
{errors.email && (
<div
class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative text-xs font-sans mb-4"
role="alert"
>
<strong className="font-bold mr-2">Holy smokes!</strong>
<span className="block sm:inline">
Please enter a valid email address.
</span>
</div>
)}
<label className="block text-xs uppercase font-sans font-bold mb-2 text-gray-700">
Your Message
</label>
<textarea
name="message"
type="text"
placeholder="Talk to me..."
ref={register({ required: true })}
rows="4"
className="mb-4 shadow appearance-none border rounded-lg w-full py-4 px-3 text-gray-700 leading-wider font-sans text-sm focus:outline-none focus:shadow-outline"
/>
{errors.message && (
<div
class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative text-xs font-sans mb-4"
role="alert"
>
<strong className="font-bold mr-2">WHAAAAT!!</strong>
<span className="block sm:inline">
You got to tell me something!
</span>
</div>
)}
<button
type="sumbit"
className="w-full bg-gray-900 text-gray-200 font-extrabold rounded-lg tracking-wider font-sans text-sm uppercase py-4  hover:bg-blue-800"
>
send message
</button>
</form>
</div>
)
}
export default ContactForm

这是打印到控制台的内容：

Response {type: "basic", url: "https://mrpbennett.com/", redirected: false, status: 200, ok: true, …}
body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: ""
type: "basic"
url: "https://mrpbennett.com/"
__proto__: Response

body: ReadableStream和bodyUsed: false给了我一个迹象，表明这里有些不对劲。任何想法，我如何解决这个问题，并让表单在响应中呈现表单数据。

现场工作示例如下： https://mrpbennett.com/contact

谢谢

Answer 1

数据已经是一个对象，如果你把它放在一个嵌套的物体(在本例中是主体(中，编码方法的map函数返回"object&object"，因为是一个对象。

您需要消除 fetch 函数中的 body 属性并扩展数据对象，以便对编码函数进行迭代。

更改此内容：

fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': 'react-validation-form',
body: data,
}),
})

为此

fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': 'react-validation-form',
...data,
}),