React Native Fetch JSON =网址为空

Question

I'm developing an App (very simple App), that request a JSON API. The piece of code that makes me angry is :

fetch("http://xxx/api/v1/samples", {
  method: "GET",
  headers: {
    'Authorization': 'Bearer ' + userToken
  }
}).then((response) => {
  if (response.ok) {
    return response.json();
  }

  throw new Error('error');
}).then((samples) => {
  console.log(samples);
  this.setState({
    data: samples,
    error: samples.error || null,
    loading: false,
    refreshing: false
  });
}).catch((error) => {
  AlertIOS.alert("OOPS", error.message);
});

The API returns:

{
  "code": "4345",
  "id": 3,
  "comment": "Echantillon trouvé dans un étang",
  "updated_at": {
    "date": "2017-07-04 11:04:34.000000",
    "timezone_type": 3,
    "timezone": "Europe/Zurich"
  },
  "project_name": "Récolte de Lézards",
  "thumbs": "http://xxx/storage-app-uploads-public-595-e01-893-595e01893c826572100952-8cf6abfd3440f538dfa95b1d581b7487.png",
  "pictures": [
    "http://xxx/storage-app-uploads-public-595-e01-893-595e01893c826572100952-8cf6abfd3440f538dfa95b1d581b7487.png"
  ]
}

My problem The var "samples" is correct (contains all fields; id, code, comment, …) expect that all the urls are empty strings.

The result of a console.log(samples) just before this.setState : { "code": "4345", "id": 3, "comment": "Echantillon trouvé dans un étang", "updated_at": { "date": "2017-07-04 11:04:34.000000", "timezone_type": 3, "timezone": "Europe/Zurich" }, "project_name": "Récolte de Lézards", "thumbs": "", "pictures": [ "" ] }

Cannot find out why.

Any ideas? Thank you so much.

Answer 1

samples is a JavaScript plain object. If expected result is an Array defined at "data" property of object passed to .setState() , set samples.pictures and .concat() samples.thumbs at "data" property.

Remove throw from .then() chained to fetch() call to avoid unexpected result.

data: samples.pictures.concat(samples.thumbs)

Answer 2

Thanks @YaSH, you are right. With HTTPS url, the strings are not empty… But why… I did not find any mentions of that point in the documentation…

@guest271314: this is equal to the component in which the fetch is called.