Using Fetch in React to fetch data from server

Question

I am trying to fetch data from the server(Node.js) with the following code:

componentDidMount = () => {
fetch('http://localhost:3000/numberofjobs')
.then(response => response.json())
.then(numberOfJobs => {
      console.log(numberOfJobs)
})
}

That's my route in Node:

const handleNumberOfJobs = (req, res, Register) => {
 Register.find({})
  .then(users =>  {
  const total = users.reduce((sum, { numberOfJobs }) => sum + 
  numberOfJobs, 0);
  console.log(total);
  })
  .then(response => res.json(response))
}

One problem I'm having is the Front-end console.log is not showing up in the console, and I don't know why. In the server side, when the pages loads it does console.log the sum and everything, so it's working so I believe I am doing something wrong with React. I want to bring this info to my front-end so I could display it on the page.

Thanks a lot!!

Side note: You're not checking for errors in that fetch call. This is such a common mistake that I wrote it up on my anemic little blog. — T.J. Crowder
– T.J. Crowder, Commented Oct 26, 2018 at 14:20
Other than the error checking on the fetch, which isn't likely to be the problem, that looks fine other than it's a bit unusual to make componentDidMount an arrow function like that. Please update your question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX; here's how to do one. (You can use setTimeout to simulate fetch.) — T.J. Crowder
– T.J. Crowder, Commented Oct 26, 2018 at 14:21
Try adding .catch(error => console.log(error)). It's likely throwing an error somehow and not reaching the console.log you have in your .then. — James Ives
– James Ives, Commented Oct 26, 2018 at 14:23
@JamesIves - Normally, though, you get an "unhandled rejection" error in the console... — T.J. Crowder
– T.J. Crowder, Commented Oct 26, 2018 at 14:23
Are you sure, .then(response => res.json(response)) would return response. I think returning response (res.json(response)) in the first then, where you have console.log would work. — Dhirendra
– Dhirendra, Commented Oct 26, 2018 at 14:36

djlauk · Accepted Answer · 2018-10-26 14:38:55Z

TL;DR

There's a mistake in how you use arrow functions' implicit returns in your server side code.

The fix is to just add a return total; in the first .then(...) handler.

Details

First off, let's get it out: I agree with the comments on not neglecting error checks! (Be it fetch or anything else.)

Anyway: You use arrow functions in your .then(...) handlers. But that last statement in the first one is console.log(total). The return value of that call is undefined, which becomes the implicit return value of your arrow function. The promise then passes this on as the value of response in your second .then(...) handler. (You could verify that by adding console.log(response) in the second .then(...) handler.

The fix is to just add a return total; in the first .then(...) handler:

const handleNumberOfJobs = (req, res, Register) => {
  Register
    .find({})
    .then(users => {
      const total = users.reduce(
        (sum, { numberOfJobs }) => sum + 
            numberOfJobs, 0
      );
      console.log(total);   // <-- returns undefined
      return total;         // <-- pass on to next promise
    })
    .then(response => {
      // console.log(response);  // if you're curious
      res.json(response)
    })
  }
}

Personal hint: Indent / lint your code for easier maintenance.

Collectives™ on Stack Overflow

Using Fetch in React to fetch data from server

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related