React — Requesting data using Fetch

Question

I am trying to get some data from an API using Fetch without success. For some reason the request is failing and I am not able to render the data... as I am quite new to React and Fetch I am not sure where the error is. Is it something to do with the way I am requesting the API?

class App extends React.Component {
  render() {
    return <Data />
  }
}


class Data extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      requestFailed: false,
    }
  }
  
  componentDidMount() { // Executes after mouting
    fetch('https://randomuser.me/api/')
      .then(response => {
        if (!request.ok) {
          throw Error("Network request failed.")
        }
        return response
      })
      .then(d => d.json())
      .then(d => {
        this.setState({
          data: d
      })
    }, () => {
      this.setState({
        requestFailed: true
      })
    })
  }
  
  
  render() {
    
    if(this.state.requestFailed) return <p>Request failed.</p>
    if(!this.state.data) return <p>Loading</p>
    
    return (
      <h1>{this.state.data.results[0].gender}</h1>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

CodePen

Can you be sure the fetch failed? You should add a .catch() to get the error. e.g. fetch('https://randomuser.me/api/') .then(response => { if (!request.ok) { throw Error("Network request failed.") } return response }).catch((error) => { console.log(error);}) — Finbarr O'B
– Finbarr O'B, Commented Jul 25, 2017 at 8:25

Shubham Khatri · Accepted Answer · 2017-07-25 09:07:20Z

1

As mentioned on the GITHUB docs, you can implement the fetch like

fetch('https://randomuser.me/api/')
  .then((response) => {
    return response.json()
  }).then((d) =>  {
    console.log('parsed json', d)
    this.setState({
          data: d
    });
  }).catch(function(ex) {
    console.log('parsing failed', ex)
    this.setState({
        requestFailed: true
      })
  })

CODEPEN

answered Jul 25, 2017 at 9:07

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

2 Comments

Diego Oriani Over a year ago

Thank you Shubham for the solution and the link. I just realised I was looking into a different documentation.

Shubham Khatri Over a year ago

No problem , Happy to help :)

Son Dang · Accepted Answer · 2017-07-25 08:25:37Z

1

fetch method should be

fetch('your_url')
  .then (  
  response => {  
    if (response.status !== 200) {   
      return 'Error. Status Code: ' +  response.status   
    }
    response.json().then(result => console.log(result)) // do sth with data 
  }  
)
  .catch(function(err) {  
  console.log('Opps Error', err)  
})

answered Jul 25, 2017 at 8:25

Son Dang

1532 silver badges11 bronze badges

2 Comments

Diego Oriani Over a year ago

Thank you for your help.

Son Dang Over a year ago

np mate, I posted this simple snippet for you to easy to define where the "result" come and you can do whatever with it, console to log out those data is the convenience way I used to do.

Daniel Andrei · Accepted Answer · 2017-07-25 08:30:54Z

1

I think your problem is with

.then(response => {
    if (!request.ok) {
      throw Error("Network request failed.")
    }
    return response
  })

There's no request object that has the property ok. Maybe you mean to check response.ok ?

.then(response => {
    if (!response.ok) {
      throw Error("Network request failed.")
    }
    return response
  })

answered Jul 25, 2017 at 8:30

Daniel Andrei

2,70417 silver badges16 bronze badges

1 Comment

Diego Oriani Over a year ago

Thank you for your help.

Collectives™ on Stack Overflow

React — Requesting data using Fetch

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related