Reactjs 错误：未捕获应为HTML表单元素或表单的样式选择器

我已使用React设置了我的联系人页面，以使用Netlify的表单提交API，但我收到以下错误：

我想要么是我的html有问题，要么是我发送数据的方式有问题。然而，我已经尽我所能按照文档完成了这项工作——尽管很难找到有效的示例

react dom.production.min.js:52未捕获的HTML表单元素或表单的样式选择器

非常感谢您的指导，谢谢

这是我的联系方式-

const encode = (data) => {
  return Object.keys(data)
      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
      .join("&");
}

function Contact() {

    const [name, setName] = useState('');
    const handleName = e => {
      setName(e.currentTarget.value);
      };

    const [subject, setSubject] = useState('');
    const handleSubject = e => {
        setSubject(e.currentTarget.value); 
    }

    const [email, setEmail] = useState('');
    const handleEmail = e => {
        setEmail(e.currentTarget.value);
    };

    const [message, setMessage] = useState('');
    const handleMessage = e => {
        setMessage(e.currentTarget.value);
  };

  const sendEmail = e => {

    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", ...useState })
    })
      .then(() => alert("Success!"))
      .catch(error => alert(error));

    e.preventDefault();
    console.log((name), (email), (message)); 
  };


  return (

    <>

    <div className="sub-wrap">

    <h3 className="small-text">Call me on the telephone</h3>

    <h3 className="numb">07879 *** ***</h3>

    <h3 className="small-text">Or punch your deets into the form below</h3>

    </div>

    <div className="form-wrap">

    <form onSubmit={ sendEmail } >

        <div className="input-wrap">

            <legend>Name</legend>
          <input
            value={ name }
            type='text'
            name='name'
            onChange={ handleName }
          />
        </div>

        <div className="input-wrap">   
          <legend>Email</legend>
            <input
              value={ email }
              type='email'
              name='email'
              onChange={ handleEmail }
            />
        </div>

        <div className="input-wrap">  
          <legend>Subject</legend>
            <input
              value={ subject }
              type='subject'
              name='subject'
              onChange={ handleSubject }
            />
        </div>

        <div className="input-wrap">  
          <legend>Message</legend>
            <textarea
                        className="msg-box"
              value={ message }
              name='message'
              onChange={ handleMessage }
                />
        </div>

            <button className='input-button' type='submit'>Send</button>

          </form>

        </div>

        </>

    );
  }

export default Contact; 

常量编码=（数据）=>{
返回Object.keys（数据）
.map（key=>encodeURIComponent（key）+“=”+encodeURIComponent（data[key]））
.加入（“&”）；
}
功能联系人（）{
const[name，setName]=useState（“”）；
常量handleName=e=>{
setName（例如currentTarget.value）；
};
const[subject，setSubject]=使用状态（“”）；
const handleSubject=e=>{
setSubject（如currentTarget.value）；
}
const[email，setEmail]=useState（“”）；
const handleEmail=e=>{
setEmail（例如currentTarget.value）；
};
const[message，setMessage]=useState（“”）；
const handleMessage=e=>{
设置消息（如currentTarget.value）；
};
const sendmail=e=>{
获取（“/”{
方法：“张贴”，
标题：{“内容类型”：“application/x-www-form-urlencoded”}，
正文：编码（{“表单名称”：“联系人”，…useState}）
})
。然后（（）=>警报（“成功！”）
.catch（错误=>警报（错误））；
e、 预防默认值（）；
console.log（（名称），（电子邮件），（消息））；
};
返回(
打电话给我
07879 *** ***
或者在下面的表格中输入您的DEET
名称
电子邮件
主题
消息
发送
);
}
导出默认联系人；

通过将按钮更改为输入解决了这一问题，尽管Netlify docs建议使用按钮