Why am I getting empty array in fetch request to MongoDB from ReactJS?

Question

I am trying to fetch all the articles from a document in MongoDB in React. It is perfectly working in Backend with NodeJS when I tested with Postman. But in Frontend , React, I am getting empty array. How to solve this.

Server.js (Backend)

app.get('/api/articles', async (req, res)=>{
    const client = await MongoClient.connect('mongodb://localhost:27017', {useNewUrlParser:true, useUnifiedTopology:true})
    const db = client.db('my-blog')

    const articleInfo= await db.collection('articles').find({}).toArray(function(err, result){
        if (err) console.log(err)
        res.status(200).send(result)
        client.close()
    })
    
})

articlePage.js (FrontEnd)

componentDidMount(){
        const requestOptions = {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' },
        };
        const fetchdata = fetch('/api/articles/').then(res=>res.json())
        .then(data=>this.setState({articles:data}))
        console.log(this.state.articles)

    }

Api address is set up in package.json with proxy:http://localhost:8000

How to get the documents data from MongoDB in React?

Your console log is going to show the old state. State doesn't change until the next render. — JMadelaine
– JMadelaine, Commented Jun 13, 2020 at 6:37

Kishan Suvarna · Accepted Answer · 2020-06-13 06:34:52Z

1

Firstly, check if you the API call went through to the server from your React app. If it has, then check for the response code in the network. In your case, 200 is where you get the desired result from the API. If you are not getting the desired result, then check your collection and document names and also arguments your are passing in the query.

answered Jun 13, 2020 at 6:34

Kishan Suvarna

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eason · Accepted Answer · 2020-06-13 15:24:07Z

0

As setState is not synchronized, you have to access it in the callback.

this.setState({ articles: data }, () => {
  console.log(this.state.articles)
})

answered Jun 13, 2020 at 15:24

Eason

5285 silver badges17 bronze badges

Collectives™ on Stack Overflow

Why am I getting empty array in fetch request to MongoDB from ReactJS?

Server.js (Backend)

articlePage.js (FrontEnd)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Server.js (Backend)

articlePage.js (FrontEnd)

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related