Here's my React code in posting:
const [nickname, setNickname] = useState('')
const [title, setTitle] = useState('')
const [content, setContent] = useState('')
const [agree, setAgree] = useState(false)
const [thepost, setThePost] = useState({})
const DoSubmit = async () => {
setHasAlert(false)
if (nickname == '' || nickname == null) {
setAlertContent("Please enter a Nickname!")
setHasAlert(true)
return
}
if (title == '' || title == null) {
setAlertContent("Please enter a Title!")
setHasAlert(true)
return
}
if (content == '' || content == null) {
setAlertContent("Cannot post an empty content!")
setHasAlert(true)
return
}
if (agree == false) {
setAlertContent("Please agree to the post rules!")
setHasAlert(true)
return
}
const data = {
title: title,
nickname: nickname,
content: content
}
setThePost(data)
await fetch('http://localhost:3001/posts', {
method: "POST",
body: thepost
})
.then(res => {
setIsError(false)
setAlertContent("Posted Successfully!")
setHasAlert(true)
console.log(res)
})
.catch(err => {
setAlertContent(err.message)
setHasAlert(true)
})
}
And for my Node/Express backend:
router.post('/', async(req,res) => {
const post = new Post({
nickname: req.body.nickname,
title: req.body.title,
content: req.body.content
})
console.log(req.body)
try {
const savedPost = await post.save()
res.json(savedPost)
console.log(savedPost)
}
catch(err){
res.json({message:err})
}
})
However, req.body is empty on my backend. And on React, it says "Successfully Posted!" and its status is 200 (so there were no errors). It just doesn't save and it doesn't see the data from that was sent from React as well.
Any ideas? Thank you!
BTW: On React, all the fields (nickname, title, content) are completely working on the frontend.
UPDATE
I'm using /posts in react but / in node since I already used a middleware on node's main app.js like this:
const postsRoute = require('./routers/posts')
app.use('/posts', postsRoute)
I have a React page getting all the posts:
const fetchData = async () => {
const data = await fetch('http://localhost:3001/posts')
const dataPost = await data.json()
setAllPosts(dataPost)
}
And it's all working fine.
This appears to be failing for three separate reasons, each of which would independently cause the symptoms you are describing.
datasetThePost(data) to update the statethepost to the bodyThe problem is that thepost is the previous value of the state. You won't get the new value until the component is re-rendered and a new DoSubmit function created, but which time it is too late — you're working with the existing DoSubmit function.
Don't use the state for this. Just use the data immediately.
fetch an objectLook at the MDN docs:
Any body that you want to add to your request: this can be a Blob, BufferSource, FormData, URLSearchParams, USVString, or ReadableStream object
A plain object is none of those things.
You should create a suitable object with either URLSearchParams or FormData depending on what format the server is expecting the data in. You might also want to encode it as JSON (and set the right Content-Type header).
See the express docs:
By default, it is undefined, and is populated when you use body-parsing middleware such as express.json() or express.urlencoded().
You need to include body parsing middleware that matches the type of data you picked when you replaced the object with something suitable in the previous section of this answer.
The combination of URLSearchParams and express.urlencoded() would probably be most suitable.
You are fetching from url : http://localhost:3001/posts in your react code but in node js you are using router.post('/', async(req,res) but you should use router.post('/post', async(req,res) instead.
See in router.post you should add posts same as you are using for fetching.
Also after correction try to do hard reload the page or try to test on incognito mode on getting empty req.body.