`Fetch` in React Native liefert keine erwarteten Daten von URL

Question

Ich möchte die fetch() API verwenden, um Daten von einer URL in einer React Native Application zu laden. Insbesondere möchte ich alle Elemente von der Hackernews Jobs Seite laden.

Wie in ihrem API doc erwähnt, hat der entsprechende Aufruf URL zu gehen: https://hacker-news.firebaseio.com/v0/jobstories.json

Wenn im Browser auf diese URL zu navigieren, erhalte ich einen einfachen JavaScript-Array von IDs wie erwartet:

[11379939,11379294,11378554,11377293,11375582,11373919,11372195,11371135,11369985,11369460,11361426,11357881,11356669,11354578,11351786,11350273,11349328,11347911,11346192,11343590,11342818,11342137,11341262,11340129] 

Wenn ich jedoch die Daten in meiner React Native App mithilfe der folgenden Methode laden möchte, erhalte ich nicht das gleiche JavaScript-Array, das ich beim Senden der Anfrage über den Browser erhalte.

export const fetchJobs =() => { 
    return (dispatch) => { 
    return fetch('https://hacker-news.firebaseio.com/v0/jobstories.json', { 
     method: 'GET', 
     headers: { 
     'Accept': 'application/json' 
     } 
    }) 
    .then((response) => { 
     console.log('Actions - fetchJobs - received response: ', response) 
     const json = JSON.parse(response) 
    }) 
    .then((jobs) => { 
     console.log('Actions - fetchJobs - received jobs: ', jobs) 
     dispatch(receiveJobs(jobs)) 
    }) 
    .catch((error) => { 
     console.warn('Actions - fetchJobs - recreived error: ', error) 
    }) 
    } 
} 

I fetchJobs() mit dispatch von Redux in meinem ersten nenne Reagieren Komponente wie folgt:

componentDidMount() { 
    var fetchJobsAction = fetchJobs() 
    console.log('JobsRootComponent - fetch jobs: ' + fetchJobsAction) 
    const { dispatch } = this.props 
    dispatch(fetchJobs()) 
} 

Wenn jedoch die Ausgabe in der Chrome-Debug-Konsole Inspektion, die Ausgabe wie folgt aussieht:

Kann mir jemand sagen, warum der Inhalt der Antwort zwischen th unterscheidet Die Anfragen, die ich aus dem Browser und die aus meiner React Native App sende?

aktualisieren: Wie in den Kommentaren aufgefordert, habe ich jetzt response.json() auch gedruckt, mir folgendes Ergebnis geben:

So in der Tat, jetzt die Array-Daten dort zu sein scheint. Aber ich verstehe immer noch nicht, wie ich es aus zugreifen kann, wo ich im Moment bin ...

Answer 1

Verwenden Rückkehr innen then

Sie haben das Ergebnis von response.json() zurückzukehren, wenn Sie chaining then calls sind.

export const fetchJobs =() => { 
    return (dispatch) => { 
    return fetch('https://hacker-news.firebaseio.com/v0/jobstories.json', { 
     method: 'GET', 
     headers: { 
     'Accept': 'application/json' 
     } 
    }) 
    .then((response) => { 
     console.log('Actions - fetchJobs - received response: ', response) 
     return response.json(); 
    }) 
    .then((jobs) => { 
     console.log('Actions - fetchJobs - received jobs: ', jobs) 
     dispatch(receiveJobs(jobs)) 
    }) 
    .catch((error) => { 
     console.warn('Actions - fetchJobs - recreived error: ', error) 
    }) 
    } 
} 

Answer 2

Die Antwort eines Abrufs hat seine eigene JSON Parse-Funktion, rufen Sie einfach response.json(), die ein neues Versprechen zurück.

fetch('https://hacker-news.firebaseio.com/v0/jobstories.json') 
    .then(reponse => response.json()) 
    .then(json => console.log(json))