'Cannot read property 'setState' of undefined' when rendering JSON from fetch call in React

Question

I'm new to React and I've created an app using the create-react-app. I have a Golang HTTP server and I am sending a GET request using fetch, receiving a JSON in response. This part works perfectly. The problem arises with wanting to render this JSON. Right now I don't care for formatting. I just want to be able to print it.

With the this.setState line I get an error:

Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined

I've seen a lot of questions here on Stack Overflow and on other websites but I can't find any explanation for why this is happening.

constructor(props) {
    super(props);

    this.state = {
        siteData: []
    };
}

componentDidMount() {
    console.log("Send GET request to Go server")
    fetch("http://localhost:8080/site", {
        method: "GET",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            'Access-Control-Allow-Origin': '*',
        }
    }).then(function(response) {
        if (response.status === 200) {
            response.text().then(function(data) {
                console.log("Get response data: " + data);
                console.log(response);
                //siteData = JSON.parse(data);

                this.setState({
                    siteData: JSON.parse(data)
                });

            });
        }
    })
}

normally people dont call the API directly inside the componentdidMount. also try using arrow function for callbacks — Sujit.Warrier
– Sujit.Warrier, Commented Feb 27, 2020 at 5:47
@Sujit.Warrier I think it's OK to call APIs in componentDidMount. You can define service or other helper methods but I think they're generally called in componentDidMount. What do you suggest? — glinda93
– glinda93, Commented Feb 27, 2020 at 6:11
@bravemaster its fine, but normally you don't put API calls directly in the component as it cant be reused — Sujit.Warrier
– Sujit.Warrier, Commented Feb 27, 2020 at 6:18
@Sujit.Warrier In React, everything is a component. And one must call Api in order to fetch data unless it uses static mockup data. And that method should be called in componentDidMount. After data is fetched, those will be passed to child components as props. So it's okay and common to call api in componentDidMount. But hard-coding urls like the above code is a bad practice. What do you think? — glinda93
– glinda93, Commented Feb 27, 2020 at 6:21
@Sujit.Warrier how would you suggest I improve upon the way and place I'm using fetch? — sindhugauri
– sindhugauri, Commented Feb 27, 2020 at 6:59

Mostafiz Rahman · Accepted Answer · 2020-02-27 08:15:32Z

2

Inside the callback functions of the promises this is not the same as the this of react component.

Use Arrow function in the callback to propagate the context of the react component to the callback function.

<your_code>.then(response => {
        if (response.status === 200) {
            response.text().then(data => {
                console.log("Get response data: " + data);
                console.log(response);
                //siteData = JSON.parse(data);

                this.setState({
                    siteData: JSON.parse(data)
                });

            });
        }
    })

edited Feb 27, 2020 at 8:15

answered Feb 27, 2020 at 5:46

Mostafiz Rahman

8,6017 gold badges63 silver badges79 bronze badges

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

8 Comments

sindhugauri Over a year ago

How would you suggest I use this siteData variable in the render function?

Mostafiz Rahman Over a year ago

once you setState siteData you will be able to access it from anywhere inside the component by this.state.siteData

sindhugauri Over a year ago

When I try to .map the variable, I get an error saying it's not a function. :/

Mostafiz Rahman Over a year ago

'.map' works only on Array. May be you are trying to map an array before it is available, please remember both fetch and setState are asynchronous

Mostafiz Rahman Over a year ago

here is one of my sample snippet for working with fetch api in react: codepen.io/mostafiz93/pen/KKpmPjM You can set initial state to avoid undefined state data.

|

Collectives™ on Stack Overflow

'Cannot read property 'setState' of undefined' when rendering JSON from fetch call in React

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related