javascript - 将 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

箭头函数按以下方式展开:

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