Destrukturierungsobjekt als Parameter in ES6

Question

Ich befolge ein Tutorial zu reagieren, und es tut mir leid für diese Neuling Frage, aber ich frage mich, warum müssen wir die Parameter in dieser Zeile dekonstruieren, wenn wir Daten von einem API abholen:

.then(({results: items}) => this.setState({items})) 

componentWillMount(){ 
    fetch('https://swapi.co/api/people/?format=json') 
     .then(response => response.json()) 
     .then(({results: items}) => this.setState({items})) 
} 

Was ich frage mich, warum können wir nicht einfach das Ergebnis von response.json() als normaler Parameter wie folgt passieren:

.then((items) => this.setState({items})) 

Answer 1

ich weiß nicht, die Datenstruktur des reponse dieser API , aber unter der Annahme, dass dieser Code funktioniert, müssen Sie "destrukturieren", da die Daten o bject, das du empfängst, ist etwas wie {results: items, ....}, aber du willst nichts mit dem Rest des Objekts machen.

Offensichtlich müssen Sie es nicht so streng tun. Sie können so etwas tun result => this.setState({ items: result.items }), aber ich denke, dass Sie mir zustimmen können, dass ein bisschen weniger kompakt ist.

Am Ende ist eine Frage der Präferenzen, aber ich persönlich bevorzuge, wie der Code mit der Destrukturierung aussieht.

Answer 2

Sie brauchen nicht zerstören müssen:

.then(res => this.setState({items: res.result })) 

oder:

.then(response => response.json().result) 
.then(items => this.setState({items})); 

Answer 3

Es ist ganz einfach, wenn Sie einen Blick von der Antwort nehmen Sie werden se, die eine Struktur wie die folgende hat.

{ 
count: 0, 
results: ... 
... 
} 

Wie Sie es ist ein Objekt sehen, dass eine seiner Eigenschaften Ergebnisse genannt wird. In diesem speziellen Fall scheint es, dass Sie sich nicht um die anderen Informationen kümmern, die Sie nur die Ergebnisse greifen, die ein Array ist. Wenn Sie nur den Rückgabewert aus dem Rückruf ohne Destrukturierung übergeben, werden Sie Ihren Status auf ein ganz neues Objekt setzen.

Answer 4

der Schritt für Schritt gehen lassen

fetch('https://swapi.co/api/people/?format=json') 
     .then(response => response.json()) 
     .then(({results: items}) => this.setState({items})) 

fetch gibt ein Versprechen, das in ein Response-Objekt löst. response.json() gibt eine Promise zurück, die in einen JSON des Antworttextkörpers aufgelöst wird. Jedes Mal, wenn Sie ein Versprechen auf eine then() zurückgeben, ist es die Kette weitergegeben, so erhalten Sie es als eine Eingabe auf die nächste then. Schließlich enthält das JSON-Objekt, das der Antworttext enthält, wahrscheinlich das Formular { results, ...}. Beim letzten Abruf nimmt die Destrukturierung JSON an, extrahiert, was auch immer der Schlüssel results enthält, und benennt ihn in items um, so dass Sie ihn innerhalb des Callbacks als Variable namens items referenzieren können.

Ohne Destrukturierung, dass letzte then müsste diese Form haben:

.then(responseBodyAsJSON => this.setState({items: responseBodyAsJSON.results }))