React/React-Native not able to assign JSON data to state variable

Question

I have a state variable ( wallsJSON ) in react-native that is supposed to hold JSON data returned from the URL http://unsplash.it/list

So in my constructor/getInitialState I have the variable set up like this

{
  wallsJSON : []
}

I am using the following function to fetch the json data

  fetchWallsJSON() {
    var url = 'http://unsplash.it/list';
    fetch(url)
      .then( response => response.json())
      .then( jsonData => {
        this.setState({
          isLoading: false,
          wallsJSON: jsonData
        });
      })
      .catch( error => console.log('JSON Fetch error : ' + error) );
  }

I am facing this error :

JSON Fetch error : TypeError: In this environment the target of assign MUST be an object.This error is a performance optimization and not spec compliant.

I tried using underscore to convert the returned data to Object using _.object, also I tried simple wallsJson: Object(jsonData)

but none of which worked.

Are you sure that the data you receive is an object and you don't have to use the result as `result = JSON.parse(data)`? — Naisheel Verdhan, Dec 18 '15 at 11:01
calling `response.json()` is supposed to return the json form of the fetched data, I tried parsing the data using `JSON.parse` but that returns an Unexpected token error, guess that has to do with the server ? — Nash Vail, Dec 18 '15 at 11:16
Try this! `fetch(url) .then( response => response.json() .then( jsonData => {...` Probably there's an additional closing parentheses after response.json() — Naisheel Verdhan, Dec 18 '15 at 11:21
Is it possible that your whole function **fetchWallJSON** doesn't know about *this*? Could you check that by `console.log(this)` at the beginning of your function. — purii, Dec 18 '15 at 11:38
@purii the function does know about 'this' . Logging this to the console logs in the correct React component — Nash Vail, Dec 18 '15 at 11:42

Naisheel Verdhan · Answer 1 · 2015-12-18T11:34:18.127

0

This works for me. The json I am returning comes after resolving the promise response.json()

function fetch(url) {

  return fetch(url).then(response =>
    response.json().then(json => {
      return json;
    })
  );
}

If the above solution does not work, try the one from the documentation in github/fetch without using es6 arrow function. This should work for sure. We can then try converting the solution below to es6 syntax.

fetch('/users.json')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

edited Dec 18 '15 at 11:34

answered Dec 18 '15 at 11:28

Naisheel Verdhan

4,905
22
34

When you print `response` or `jsonData` to the console, what does it look like? Is `jsonData` an object? – Naisheel Verdhan Dec 18 '15 at 11:47
Its an array and not an Object! Oh my bad. I did not see that it was defined as an array in the first place. You don't have to call response.json() at all. If you store your response in your state, that will be it! – Naisheel Verdhan Dec 18 '15 at 11:51
Isn't type of Array also object, and response you're talking about is not a plain array or object, it has other functions like json() and text() defined inside of it so that cannot be assigned to the state variable – Nash Vail Dec 18 '15 at 11:55
Yes you are correct. The png you sent was the result of which variable: `response` or `jsonData`? If its response, then it does not have headers and other details. If its `jsonData` then the error may be because you are trying to assign an array...I am not sure. Also, refer http://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs – Naisheel Verdhan Dec 18 '15 at 12:05
It was jsonData, everything was working fine until last night then their API went down this morning and recently came up and then this error .. .I am not sure too XD thanks anyways – Nash Vail Dec 18 '15 at 12:08

score 0 · Answer 2 · answered Nov 19 '18 at 05:53

i think the error is obvious in your fetchWallsJson() function. on the line response => response.json() your'e assing the results to the object json. so the next line should be

.then(json => { this.setState({
   isLoading: true,
   wallsJson: json, //json.results or something likes that(highly likely)          
          }) 
)

//which would be the same object you assinged your response to.

React/React-Native not able to assign JSON data to state variable

2 Answers2