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

我对javascript比较陌生，我一直在学习React。我遵循了一些教程，在React中使用fetch（）从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});
    })

fetch（请求）
.then（response=>response.json（））
.然后（数据=>{
让drinkNames=data.data.map(
（数据选择）=>{
返回(
{dataSelect.name}
)
})
this.setState（{饮料：饮料}）；
})

这就是简短的代码，它包含了看起来像是返回其他函数的嵌入函数的内容，但是当尝试扩展它时，我尝试的所有内容都会给我一个错误，我想了解发生了什么。有人能帮我扩展代码吗

我从文档中了解到，在其基本用法中，arrow函数返回括号中的任何内容。按照这个逻辑，我试着

then(function(data){

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

        return longhand();

then（函数（数据）{
函数longhand（）{
让drinkNames=data.data.map(
（数据选择）=>{
返回(
{dataSelect.name}
)
})
}
返回右手（）；

---

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

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

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});
    })

fetch（请求）
.然后（功能（响应）{
返回response.json（）
})
.then（函数（数据）{
让drinkNames=data.data.map（函数（dataSelect）{
返回(
{dataSelect.name}
)
})
this.setState（{饮料：饮料}）；
})

更新：

正如注释中正确提到的那样，

此

的上下文将发生变化，因为箭头函数与常规函数不同，它们不会创建自己的上下文。在没有看到整个组件的情况下，我无法100%肯定地告诉您此将变为什么，但我怀疑它将是窗口或未定义的。

---

您可以始终使用

Function.prototype.bind

来明确告诉函数此

应该引用什么
。
您试图扩展什么以及遇到什么错误？只需一个提示，使用codesandbox或codepen之类的在线工具开始工作/测试，它允许您轻松地共享您的代码，并帮助我们了解您的想法如果您想处理hanks，我将尝试这样做。我正在尝试扩展.then（data=>…直到“this.setState（{drinks:drinkNames}）”之前的内容代码可以工作，但我不能完全理解它是如何工作的，这就是为什么我要扩展它。如果要在承诺结果中呈现react，这是不允许的。react组件应该始终同步呈现。您可以使用
setState
将数据传递给组件的呈现函数。如我所说，请在上创建一个示例项目codesandbox。有很多初学者项目。arrow函数没有自己的
this
-相反，
this
是封闭执行上下文的
this
-如果您想正确地将es6+扩展到es5，请使用一个transpiler，如babel。但是，请注意，这段代码“脱离上下文”将导致代码不太正确，特别是关于
这个
我按照你的建议制作了codesandbox文件，但问题是我连接的API不是https，所以它无法获取。这里是无论如何，如果你想看到完整的代码，即使它不会呈现。尽管代码本身可以工作，我只是在尝试为了扩展它以便我可以破译正在发生的事情：/>代码沙盒这几乎是正确的，除了
this中的
this
。setState
将是
未定义的
或全局对象（它是哪一个取决于其他因素）-从技术上讲，如果您想要相同的功能，您应该在提取之前添加
var\u this=this
，并使用
\u this.setState