当我使用 Postman 后端时,它工作正常。但是当使用React并试图向数据库添加数据时,给出了400错误。
当我使用console.log(newpost)
时,它在控制台上给出了一个新的post对象。但是我不能将数据发送到数据库。如何解决这个问题?
postman image
我的React代码:
import React, {useState} from "react";
import axios from "axios";
export default function AddPost(){
const [topic,setTopic] = useState("")
const [dec,setDec] = useState("")
const [cate,setCate] = useState("")
function sendData(e){
e.preventDefault();
const newpost = {
topic,
dec,
cate
}
axios.post("http://localhost:8000/post/save",newpost)
.then(()=>{
alert("post added")
setTopic ("")
setDec ("")
setCate("")
}).catch((err)=>{
alert(`Not inserted ${err}`)
})
}
return(
<div className="container">
<form onSubmit={sendData} >
<div className="mb-3">
<label htmlFor="name" className="form-label">topic</label>
<input type="test" className="form-control" id="name" aria-describedby="emailHelp" onChange={(e)=>{
setTopic(e.target.value)
}} />
</div>
<div className="mb-3">
<label htmlFor="Age" className="form-label">description</label>
<input type="test" className="form-control" id="Age" onChange={(e)=>{
setDec(e.target.value)
}}/>
</div>
<div className="mb-3">
<label htmlFor="Gender" className="form-label">postCategory</label>
<input type="test" className="form-control" id="Gender" onChange={(e)=>{
setCate(e.target.value)
}}/>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
<div/>
</div>
)
}
2条答案
按热度按时间pgx2nnw81#
根据 Postman 的请求,响应代码没有正确传递请求正文。预期的键名不匹配。您需要按如下所示更改
newpost
变量:unguejic2#
尝试添加命名键。
例如: