我有一个可以在网站上重复使用的表单组件，该组件将表单名称作为参数。该站点使用 Gatsby 构建并托管在 Netlify 上。
每当我尝试填写表单并按下提交按钮时，我的控制台中都会出现 404 错误并且表单未提交，但我可以在 Netlify Forms 中看到所有表单。我不确定我的错误在哪里，当我在 chrome 中检查时，我发现该data-netlify="true"属性不存在于我的前端，但它存在于代码中。
我的职能
import React, { useState } from "react"
import { useForm } from "react-hook-form"
function encode(data) {
return Object.keys(data)
.map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&")
}
const ContactForm = ({ data, name, type, index }) => {
const { register, handleSubmit, errors, reset } = useForm({
mode: "onBlur",
})
const [feedbackState, setFeedbackState] = useState(null)
const [errorState, setErrorState] = useState(null)
const [requestType, setRequestType] = useState(null)
const [state, setState] = useState({})
const handleChange = (e) => {
{
setState({ ...state, [e.target.name]: e.target.value })
}
}
const onSubmit = (data, e) => {
e.preventDefault()
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({
"form-name": {name},
...state,
}),
})
.then((response) => {
setFeedbackState(true)
reset()
})
.catch((error) => {
setErrorState(true)
})
}
我的表格：
if (feedbackState) {
return (
<div className="callout success">
<h3>Vad roligt att du är intresserad av våra produkter!</h3>
<p>
Vi kommer höra av oss inom kort till {state.fName} {state.lName} på{" "}
{state.email}.
</p>
</div>
)
} else {
return (
<>
{console.log("form navn er, ", name)}
<form
id="contactMe"
onSubmit={handleSubmit(onSubmit)}
name={name}
method="post"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value={name} />
<div hidden>
<label>
Don’t fill this out:{' '}
<input name="bot-field" onChange={handleChange} />
</label>
</div> <fieldset class="grid-x grid-margin-x">
<legend class="cell">
<h3>{data.formTitle}</h3>
</legend>
<div class="cell medium-6">
<div class="form-field">
<label htmlFor="fName">
{data.firstName}
<span
id="error-required-field"
style={{
display:
errors.fName && errors.fName.type === "required"
? "block"
: "none",
}}
>
{data.firstNameRequired}
</span>
<span style={{ display: "none" }}>
<label>Request type: </label>
<input
type="text"
id="requestType"
onChange={handleChange}
name="requestType"
value={type}
ref={register({ required: true })}
/>
</span>
</label> ....more form values
可以在这里看到我如何查看表单的示例，我已经尝试使用 console.logging 我的表单中的所有属性，并且可以看到所有这些属性
<ContactForm
name="Tilgjenlighetsanalys"
data={data.auditsForm}
type="Liten analys"
/>
关于我做错了什么的任何想法？
编辑：当我提交表单名称设置为 [object Object] 而不是实际表单名称时，我可以在我的 chrome 网络选项卡中看到
