Javascript React/ES6:箭头函数未按预期绑定“this”

语言：React/JavaScript ES6

捆绑工具：WebPackageBabel loader 6.0.0

涉及的其他LIB：传单

问题:

通过上下文下面的函数，这将绑定到 我需要的组件

之前：

但当我把它切换到使用箭头功能时，我预料到了 一个等价的绑定，但它已更改为传单类 o、 Class.extend.e-未定义此.setState

之后：

问：为什么使用箭头函数与 在我的案例中绑定此项？

进行了一些更改： 箭头函数不绑定this关键字。他们就是这样工作的。如果需要使用此关键字，则需要使用bind函数。 另外，使用带有箭头的绑定函数可能会很奇怪。您可能需要执行以下操作：

componentDidMount: function() {
    var thisKey = this;
    map.on('draw:created', (e) => {
        this.setState({someProp:propUpdate});
        featureGroup.addLayer(e.layer);
    }.bind(thisKey));

}

进行了一些更改： 箭头函数不绑定this关键字。他们就是这样工作的。如果需要使用此关键字，则需要使用bind函数。 另外，使用带有箭头的绑定函数可能会很奇怪。您可能需要执行以下操作：

componentDidMount: function() {
    var thisKey = this;
    map.on('draw:created', (e) => {
        this.setState({someProp:propUpdate});
        featureGroup.addLayer(e.layer);
    }.bind(thisKey));

}

---

有同样的问题。事实证明，在我的例子中，使用预设“@Babel/preset env”的Babel加载程序并没有像人们所期望的那样将箭头函数绑定到这个函数

在我的网页配置中使用此插件添加了正确的绑定

plugins: [
  ['@babel/plugin-transform-arrow-functions', { 'spec': true }]
]

---

有同样的问题。事实证明，在我的例子中，使用预设“@Babel/preset env”的Babel加载程序并没有像人们所期望的那样将箭头函数绑定到这个函数

在我的网页配置中使用此插件添加了正确的绑定

plugins: [
  ['@babel/plugin-transform-arrow-functions', { 'spec': true }]
]

---

请参考@Rayon，forEach循环中的arrow函数示例并没有给出任何线索，说明我的异步回调正在丢失绑定范围。您是否建议词法绑定与es5绑定不同？似乎是您的环境/transpiler中的一个bug。虽然巴别塔应该很好用。代码本身看起来不错。如果我们不能重现这个问题，我怀疑我们能帮上多少忙。到目前为止，我认为@FelixKling可能是对的。反应：^0.14.0，网页：^1.12.1，巴别塔核心：^6.6.4，巴别塔加载器：^6.2.4，巴别塔聚合填充：^6.9.1，巴别塔预设-es2015：^6.6.0，巴别塔预设反应：^6.5.0，babel-preset-stage-0:^6.5.0尝试升级到babel的最新版本。请参阅@Rayon，forEach循环中的箭头函数示例无法提供任何线索，说明我的异步回调正在丢失绑定范围的原因。您是否建议词法绑定与es5绑定不同？似乎是您的环境/transpiler中的一个bug。虽然巴别塔应该很好用。代码本身看起来不错。如果我们不能重现这个问题，我怀疑我们能帮上多少忙。到目前为止，我认为@FelixKling可能是对的。react:^0.14.0，网页：^1.12.1，babel core:^6.6.4，babel loader:^6.2.4，babel polyfill:^6.9.1，babel-preset-es2015:^6.6.0，babel-preset react:^6.5.0，babel-preset-stage-0:^6.5.0尝试升级到babel的最新版本。