react setState sets to string instead of object

Question

I am trying to fetch a big json file when the webpage has been loaded and then update react state with that data.

Currently, I have this code

get(url) {
 return new Promise((resolve, reject) => {
   const req = new XMLHttpRequest();
   req.open('GET', url);
   req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
   req.onerror = (e) => reject(Error(`Network Error: ${e}`));
   req.send();
 });

}

componentDidMount(){
  this.get('https://x.com/data/tool.json').then((response) =>{
    this.setState({"sections" : response});
    console.log(this.state);
  }).catch((err) =>{
    console.log(err);
  });
}

The code sets sections to a sting as shown in the screenshot instead of the actual json object.

react setstate problem

How can I initialize state with the fetched json.

I have tried that many tmes. Also tried JSON.stringify first to ensure everything go right bu no luck. — Rohit Kumar
– Rohit Kumar, Commented Jul 18, 2017 at 9:51

Rohit Kumar · Accepted Answer · 2017-07-18 18:11:05Z

3

Firstly I would recommend using the fetch library instead of Promises and XMLHttpRequest. If you need to support IE 11 and below, you can use a polyfill

Sticking with your code though, at no point do you appear to use JSON.parse on your response, to turn the JSON string you get back into a JavaScript object.

this.setState({"sections" : JSON.parse(response)});

This would be much easier and cleaner with fetch though I feel,

componentDidMount(){
  fetch('https://abx.com/data/tool.json').then(response =>{
    if (!response.ok) throw Error('Response not ok')

    return response.json(); // This is built in JSON.parse wrapped as a Promise
  }).then(json => {
    this.setState({"sections" : json});
  }).catch(err =>{
    console.log(err);
  });
}

edited Jul 18, 2017 at 18:11

Rohit Kumar

991 gold badge2 silver badges5 bronze badges

answered Jul 18, 2017 at 9:42

Will Hawker

7313 silver badges14 bronze badges

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

1 Comment

Rohit Kumar Over a year ago

Thank you, this works. I have reinstalled babel-loader after which your code worked perfectly. I don't know why yarn installed binaries don't work as expected.

Collectives™ on Stack Overflow

react setState sets to string instead of object

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related