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

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 应该引用什么。