在ES6中销毁对象作为参数

Question

I am following a tutorial on react, and I am sorry for this newbie question but I am wondering why do we need to deconstruct parameters in this line, when we fetch data from an api:

.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}))
}

What I am wondering is, why can't we just pass the result of response.json() as a normal parameter like this:

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

Answer 1

I don't know the data structure of the reponse of that API, but assuming that that code is working, you "need" to destructure because the data object you're receving it's something like { results: items, .... }, but you don't want to do anything with the rest of the object.

Obviously, you don't need to do it like that in a strict way. You can do something like this result => this.setState({ items: result.items }) , but I think that you can agree with me that is a bit less compact.

In the end is a question of preferences, but I personally prefer how the code looks with the destructuring.

Answer 2

You dont need to destruct:

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

or:

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

Answer 3

It's simple if you take a look of the response you will se that has an structure like the following.

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

As you can see it's an object that one of its properties is called results . In this particular case it seems you don't care about the other information you only want to grab the results which is an array. If you were to just pass the return value from the callback without Destructuring you will set your state to a whole new object.

Answer 4

Let's go step by step

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

fetch returns a Promise that resolves into a Response object. response.json() returns a Promise that resolves into a JSON of the response body. Every time that you return a Promise on a then() it's passed down the chain, so you get it as an input on the next then . Finally, the JSON object that the response body contains it's probably of the form { results, ...} . on the last fetch, the destructuring takes that JSON, extracts whatever the results key has inside and renames it to items , so you can reference it inside the callback as a variable called items .

Without destructuring, that last then would need to have this shape:

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