Reactjs 在react中提交forn时获取错误请求

这就是我创建的组件。我可以在

控制台中获取联系人

，但在提交时抛出错误。我可以通过邮递员发布数据；当我提交表单时，问题就出现了。

handlesubmit

函数中的错误在哪里

从“axios”导入axios；
从“React”导入React，{useState}；
const ContactForm=（）=>{
const[contact，setContact]=useState({
名字：''，
姓氏：“”，
电话号码：“”，
电子邮件：“”，
消息：“”，
});
功能手柄更改（e）{
setContact（{…contact[e.target.name]：[e.target.value]}）；
}
函数hanhdleSubmit（e）{
e、 预防默认值（）；
控制台日志（联系人）；
axios
.post（'http://localhost:8080/contact",联络)
。然后（（响应）=>{
log（'post-api'后的响应'，Response.data）；
})
.catch（（错误）=>{
log（'发布api时出错'，错误）；
});
}
返回(










提交
名字：{contact.firstName}
姓氏：{contact.lastName}
电话号码：{contact.phoneNumber}
电子邮件：{contact.Email}
消息：{contact.message}
);
};
导出默认联系人表单；

这就是我得到的错误：

{
“时间戳”：“2020-12-04T18:32:39.945+00:00”，
“状态”：400，
“错误”：“错误请求”，
“电文”：“，
“路径”：“/联系人”
}

我认为这是发送到后端的正文的语法，axios.post的第二个参数应该是一个对象：

axios
      .post('http://localhost:8080/contact', contact)

应该是

axios
      .post('http://localhost:8080/contact', { contact })

---

让我知道这是否是问题所在。不是Marc，我在提交它之前已经尝试过了，因为set Contact（{…Contact，[e.target.name]：[e.target.value]}）我把[]放在e.target.name中。谢谢你的回复。在onChange中，你将值设置为{…Contact，[e.target.name]：[e.target.value]}`应该是{…Contact，[e.target.name]：e.target.value}`这篇文章正在发送用括号括起来的值…是的，为我工作了Zsolt，非常感谢您的重播