React + NodeJs Fetch issue

Question

I am trying to fetch the following results of my api (which is working well) http://localhost:5000/api/continents

{"data":[{"continentId":3,"CName":"Atlantis"},{"continentId":2,"CName":"Devias"},{"continentId":1,"CName":"Lorencia"}]}

into a react component (a simple array to begin with).

Endpoint code extracted from server.js:

app.get('/api/continents', (req, res) => {
    connection.query(SELECT_ALL_CONTINENTS_QUERY, (err, results) => {
        if(err){
            return res.send(err)
        }
        else{
            return res.json({
                data: results
            })
        }
    });
});

Here is my continents.js code:

import React, { Component } from 'react';
import './continents.css';

class Continents extends Component {
    constructor() {
        super();
        this.state = {
            continents: []
        }
    }

    ComponentDidMount() {
        fetch('http://localhost:5000/api/continents')
            .then(res => res.json())
            .then(continents => this.setState({continents}, () => console.log('Continents fetched..', continents)));
    }

  render() {
    return (
      <div>
        <h2>Continents</h2>
      </div>
    );
  }
}

export default Continents;

And here is the App.js code:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Continents from './components/continents/continents';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Developed with NodeJS + React</h1>
        </header>
        <Continents />
      </div>
    );
  }
}

export default App;

Issue:

continents array is empty. No data fetched. However, there are no errors. I would very much appreciate if someone could guide me in the right direction to solve this. Thank you very much.

o elhajoui · Accepted Answer · 2020-12-21 20:38:58Z

3

ComponentDidMount is a function so it shouldn't be capitalized it should be: componentDidMount.

And you're passing the incorrect value to the setState method, you should pass {continents: continents.data} instead of the continents object itself.

The corrected code:

componentDidMount() {
    fetch('http://localhost:5000/api/continents')
        .then(res => res.json())
        .then(continents => this.setState({continents: continents.data}));
}

edited Dec 21, 2020 at 20:38

answered Nov 12, 2018 at 22:58

o elhajoui

3944 silver badges14 bronze badges

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

Comments

Rutul Patel · Accepted Answer · 2018-11-12 22:47:32Z

1

@Razvan Can you please correct name of your componentDidMount method. It should be componentDidMount not ComponentDidMount. C must be lowercase.

answered Nov 12, 2018 at 22:47

Rutul Patel

6832 gold badges10 silver badges23 bronze badges

Comments

Samuel · Accepted Answer · 2018-11-12 22:49:04Z

1

I think the data structure coming back from your API service call contains a data key. Try changing your setState to:

this.setState({continents: continents.data})

If that does not fix it, I'd double check the shape of the data structures you are passing around because the logic seems correct.

answered Nov 12, 2018 at 22:49

Samuel

2,4522 gold badges23 silver badges43 bronze badges

1 Comment

Razvan Stanciu Over a year ago

Thanks, there was also a problem with the spelling for componentDidMount() method.

renick J V · Accepted Answer · 2019-08-21 11:07:01Z

0

fetch has issues on certain browsers. We faced issues with Samsung Native Browser all iPhone ios11 safari browsers.. The fix we applied is adding the credentials fetch('/users', { credentials: 'same-origin' })

Below copied from https://github.com/github/fetch#sending-cookies

• Firefox 39-60 • Chrome 42-67 • Safari 10.1-11.1.2 If you target these browsers, it's advisable to always specify credentials: 'same-origin' explicitly with all fetch requests instead of relying on the default: fetch('/users', { credentials: 'same-origin' })

answered Aug 21, 2019 at 11:07

renick J V

1

Collectives™ on Stack Overflow

React + NodeJs Fetch issue

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related