Question

我正在关注反应的教程，我很抱歉这个新手问题，但我想知道为什么我们需要解析这一行中的参数，当我们从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}))
}

我想知道的是，为什么我们不能将response.json()的结果作为普通参数传递出来：

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

Answer 1

我不知道该API响应的数据结构，但假设该代码正常运行，您需要＆＃34;需要＆＃34;进行结构化是因为您接收到的数据对象类似{results：items，....}，但您不想对该对象的其余部分做任何事情。

显然，你不需要严格按照这样做。你可以做这样的事情result => this.setState({ items: result.items })，但我认为你可以同意我的说法不那么紧凑。

最后是一个偏好问题，但我个人更喜欢代码看起来如何解构。

Answer 2

你不需要破坏：

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

或：

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

Answer 3

如果您看一下具有如下结构的响应，这很简单。

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

正如您所看到的那样，该对象的一个属性称为结果。在这种特殊情况下，您似乎并不关心您只想获取结果这是一个数组的其他信息。如果您只是在没有 Destructuring 的情况下从回调中传递返回值，那么您将把状态设置为一个全新的对象。

Answer 4

让我们一步一步走

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

fetch返回一个解析为Response对象的Promise。 response.json()返回一个Promise，它解析为响应主体的JSON。每当你在then()上返回一个Promise时，它就会传递到链中，所以你将它作为下一个then的输入。最后，响应主体包含它的JSON对象可能是{ results, ...}形式。在最后一次获取时，解构采用JSON，提取results键内部的任何内容并将其重命名为items，因此您可以在回调中将其作为名为items的变量引用。

如果没有解构，最后then需要具有这种形状：

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

将对象解构为ES6中的参数

4 个答案: