Question

我在这里学习ReactJS： https://egghead.io/lessons/react-dynamically-generated-components并遇到了以下代码段：

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

箭头函数的({results: items})部分是什么意思？

我见过箭头功能

没有参数()=>console.log('hi')
没有括号word=>console.log(word)
并使用逗号(one, two)=>console.log(one)

但绝不是这样的对象文字。

另外，为什么this.setState({items})需要items左右的花括号？这一切意味着什么？

Answer 1

this.setState({items})

是ES6的简写

this.setState({items: items})

和

({results: items})

基本上接受一个对象作为参数，其属性名为results，在函数体中，它被映射到项

运行一个例子，例如babel try it out repl page您的代码

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

变为

var _this = this;

fetch('http://swapi.co/api/people/?format=json')
.then(function (response) {
    return response.json();
})
.then(function (_ref) {
    var items = _ref.results;
    return _this.setState({ items: items });
});

我建议保留一个指向该babel页面的链接 - 如果任何ES6代码让您感到困惑，请将其粘贴到那里以查看ES5版本是什么：p这是我的作弊

Javascript Arrow与对象一起作为参数意味着什么？

1 个答案: