How to handle fetch API AJAX response in React

Question

I am making a simple AJAX request with the fetch API in React, specifically in the componentDidMount() function.

It is working, because the console appears to be logging the result. However, I don't know how to access the response...

componentDidMount = () => {

      let URL = 'https://jsonplaceholder.typicode.com/users'

         fetch(URL)
         .then(function(response) {
            let myData = response.json()
            return myData;
         })
         .then(function(json) {
            console.log('parsed json', json)
         })
         .catch(function(ex) {
            console.log('parsing failed', ex)
         })

   } // end componentDidMount

I tried accessing myData outside of the fetch method, but this throws an error saying that it is undefined. So it is only accessible within the scope of the function.

I then tried this:

     .then(function(response) {
        let myData = response.json()
        // return myData;
        this.setState({
           data: myData
        })
     })

This time, I get Cannot read property 'setState' of undefined(…)

How do I pass the fetch response to the state, or even just a global variable?

UPDATE

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

class App extends Component {

   constructor(props) {
      super(props);
      this.state = {
         data: null
      }
   }

   componentDidMount() {
      let URL = 'https://jsonplaceholder.typicode.com/users'  
         fetch(URL)
         .then( (response) => {
            let myData = response.json()
            // return myData;
            this.setState({
               data: myData
            })
         })
         .then( (json) => {
            console.log('parsed json', json)
         })
         .catch( (ex) => {
            console.log('parsing failed', ex)
         })
         console.log(this.state.data)
   } // end componentDidMount

  render() {
    return (
      <div className="App">
         {this.state.data}
      </div>
    );
  }
}

export default App;

StackOverMySoul · Accepted Answer · 2016-09-30 20:20:39Z

13

You have two issues as far as I can see, response.json() returns a promise, so you don't wanna set myData to the promise, instead first resolve the promise and then you can access your data.

Second, this is not in the same scope inside your fetch request, so that's why you are getting undefined, you can try saving the scope of this outside fetch:

var component = this;

fetch(URL)
 .then( (response) => {
    return response.json()    
 })
 .then( (json) => {
    component.setState({
       data: json
    })
    console.log('parsed json', json)
 })
 .catch( (ex) => {
    console.log('parsing failed', ex)
 })
 console.log(this.state.data)

answered Sep 30, 2016 at 20:20

StackOverMySoul

2,0371 gold badge15 silver badges21 bronze badges

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

1 Comment

Mandar Belkunde Over a year ago

thnx alot dude! i wasted 3 hours for this

Tomasz Nowak · Accepted Answer · 2016-09-30 19:50:58Z

7

setState is undefined, because you use classic function syntax instead arrow function. Arrow function takes 'this' keyword from 'parent' function, a classic function() {} creates it's own 'this' keyword. Try this

.then(response => {
    let myData = response.json()
    // return myData;
    this.setState({
       data: myData
    })
 })

answered Sep 30, 2016 at 19:50

Tomasz Nowak

1862 silver badges10 bronze badges

Comments

Patrick Grimard · Accepted Answer · 2016-09-30 22:07:34Z

3

You're on the right track with this.setState however this is no longer in the context of the component when you call it within the function handling the response. Using a => function maintains the context of this.

fetch(URL)
    .then((res) => res.json())
    .then((json) => this.setState({data: json}));

edited Sep 30, 2016 at 22:07

answered Sep 30, 2016 at 19:46

Patrick Grimard

7,1169 gold badges53 silver badges69 bronze badges

8 Comments

Paulos3000 Over a year ago

Thanks. That makes sense, but I'm still not getting the desired result. Please take a look at my update...

Patrick Grimard Over a year ago

You're still referencing this in the context of the response handler and not the context of the component. You either need to bind the component to your function or use a fat arrow function in order to maintain the context of this.

Patrick Grimard Over a year ago

I see your update now. You've now declared componentDidMount with an arrow function. This essentially breaks your component because now this inside that arrow function is no longer in the context of the component. You should declare it like componentDidMount() {} like you had before. The response handler from the fetch response is the one that needs to use the arrow function.

Paulos3000 Over a year ago

Still not working :/ Have changed my update... myData is still holding the null value I declared in the state initialisation...

Patrick Grimard Over a year ago

Have you tried rendering this.state.data in your render() method? Once you call this.setState({data: myData}), it will trigger a render of your component. Also, if you're using Chrome, you can debug this using the React Devtools Chrome extension. It will allow you to see the state of your component after the call to this.setState({data: myData}).

|

Brijmohan Karadia · Accepted Answer · 2017-03-07 12:06:56Z

REACT NATIVE

import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';

export default class SampleApp extends Component {
constructor(props) {
super(props);
this.state = {
    data:  'Request '
    }
}

componentDidMount = () => {
fetch('http://localhost/replymsg.json', {
                      mode: "no-cors",
                      method: "GET",
                      headers: {
                        "Accept": "application/json"
                      },} )
                      .then(response => {
                      if (response.ok) {

                          response.json().then(json => {

                            console.warn( JSON.stringify(json.msg ));
                              this.setState({
                                 data: JSON.stringify(json)
                            })

                        });
                      }
                    }); 

}



render() { 
return (
    <Text>  {this.state.data}</Text>
    );
    }
}

AppRegistry.registerComponent('SampleApp', () => SampleApp);

JSON FILE create a file replymsg.json and put below content and it should host to local host like : http://localhost/replymsg.json

{"status":"200ok","CurrentID":28,"msg":"msg successfully reply"}

Ye Yint · Accepted Answer · 2017-09-14 04:30:52Z

1

Change the way you access the response data by using '=>' instead of function to be in the same context.

componentDidMount = () => {

      let URL = 'https://jsonplaceholder.typicode.com/users'

         fetch(URL)
         .then(function(response) {
            let myData = response.json()
            return myData;
         })
         .then((json) => {
            console.log('parsed json', json)
         })
         .catch(function(ex) {
            console.log('parsing failed', ex)
         })

} // end componentDidMount

answered Sep 14, 2017 at 4:30

Ye Yint

9242 gold badges14 silver badges21 bronze badges

Comments

Floyd · Accepted Answer · 2016-12-09 11:14:56Z

0

You need to bind current context to the target function

fetch(URL)
         .then(function(response) {
            return response.json();
         })
         .then(function(json) {
            this.setState({data: json})
         }.bind(this))
         .catch(function(ex) {
            console.log('parsing failed', ex)
         })

answered Dec 9, 2016 at 11:14

Floyd

3672 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to handle fetch API AJAX response in React

UPDATE

6 Answers 6

1 Comment

Comments

8 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

6 Answers 6

1 Comment

Comments

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related