Question

我对javascript相对较新，而且我一直在学习React。我按照一些教程使用fetch（）从React中的API中获取数据。本教程当然运行良好，当用不同的API重新创建它时，我花了几个小时来弄清楚如何复制它甚至复制速记代码，所以我一直在尝试扩展这段代码，所以我可以完全理解发生了什么事。

fetch(request)
    .then(response => response.json())
    .then(data => { 
        let drinkNames = data.data.map(
            (dataSelect) => {
            return (
                <div key={dataSelect.data}>
                {dataSelect.name}
                </div >
            )
        })
        this.setState({drinks:drinkNames});
    })

这是短代码，它包含看起来像嵌入其他函数的嵌入函数，但是当我尝试扩展它时，我尝试的一切都给了我一个错误，我想了解发生了什么。任何人都可以帮我扩展代码吗？

我从文档中读到，在其基本用法中，箭头函数返回括号中的任何内容。遵循这个逻辑，我试过

then(function(data){

        function longhand(){
            let drinkNames = data.data.map(
            (dataSelect) => {
                return (
                    <div key={dataSelect.data}>
                    {dataSelect.name}
                    </div >
                )
            })
        }

        return longhand();

这显然不起作用，似乎在我的新的longhand（）函数中还有另一个简写箭头函数，所以我总体上有点困惑。帮助

Answer 1

箭头功能以下列方式扩展：

then(data => data.id)

等于：

then(function(data) {
    return data.id
});

因此，ES5语法中的原始代码如下所示：

fetch(request)
    .then(function(response) {
        return response.json()
    })
    .then(function(data) { 
        let drinkNames = data.data.map(function(dataSelect) {
            return (
                <div key={dataSelect.data}>
                    {dataSelect.name}
                </div >
            )
        })
        this.setState({drinks:drinkNames});
    })

<强>更新

正如评论中正确提到的那样，this的上下文会发生变化，因为不像常规函数的箭头函数不会创建自己的上下文。在没有看到你的整个组件的情况下，我无法100％确定地告诉你this将会改变什么，但是我怀疑它将是Window或未定义的。您始终可以使用Function.prototype.bind明确告诉函数this应该引用的内容。

将javascript（ES6）箭头符号（简写）扩展为完整语法？

1 个答案: