Node does not receive React's POST request

user_18034508 0
Viewed 239

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.

reactjs express node.js mongodb javascript
2 Answers

This appears to be failing for three separate reasons, each of which would independently cause the symptoms you are describing.

You are passing the wrong variable

  1. You collect the data in data
  2. You call setThePost(data) to update the state
  3. You pass thepost to the body

The 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.

You are passing fetch an object

Look 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).

The server has no body parsing middleware

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.

Dorward_190680

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.

user_88846120
Related