Reactjs “的价值”；这"；调试Babel transpiled与Chrome Devtools的反应时不正确

我有一个React应用程序，它是使用以下.babelrc配置与Babel一起传输的

{
  "presets": [
    "es2015",
    "stage-1",
    "react"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

plugins: [
new webpack.SourceMapDevToolPlugin({
  filename: '[name].js.map',
  include: ['app.js'],
  columns: false
})
],

应用程序可以传输，运行良好。但是，当我调试事件处理程序（故意编写为箭头函数）时，Chrome调试器将“this”的值显示为null。下面是一个示例事件处理程序

handleNext = (event) => {
    event.preventDefault();
    this.gotoPage(this.state.page + 1);
}

如果在事件处理程序的第一行设置断点，调试器会将“this”的值显示为null，但将“this”的正确值显示为“this”。正如我所说，代码运行得很干净，但调试令人沮丧，因为我不能简单地在代码中的字段上悬停以查看它们的值。如果我将“this”绑定到我的事件处理程序，我就可以解决调试问题，但我不必执行额外的步骤。所有这些都在Babel5中运行良好，只是在我们切换到Babel6之后才成为一个问题

我正在使用webpack捆绑代码并创建sourcemaps。以下是我的webpack.config.js中的sourcemaps配置摘录

{
  "presets": [
    "es2015",
    "stage-1",
    "react"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

plugins: [
new webpack.SourceMapDevToolPlugin({
  filename: '[name].js.map',
  include: ['app.js'],
  columns: false
})
],

---

不幸的是，在使用Chrome的Babelified代码中使用调试器时，这是事实。要使用ECMAScript规范行为实现箭头函数，需要将

this

关键字转换为不同的名称，目前无法告诉Chrome如何进行调试。Firefox的开发工具有一系列额外的逻辑来解决类似的问题，因此，如果您使用Firefox并启用“映射范围”复选框，它可能会正常工作，但也可能会比较慢，因为它并不琐碎

一个选项是尝试使用arrow函数转换的

spec

选项，这将使其在调试时表现得更好，但并非在所有情况下都有效

"plugins": [
    ["transform-es2015-arrow-functions", {spec: true}]
]

---

你试过stage-0预置吗？据我所知，这也是巴别塔5的一个问题。Chrome无法将

this

映射到

\u this

。刚刚注意到您在使用此.setState（{page:this.state.page+1}）时正在更改页面状态。我使用stage-0预设，能够访问适当的上下文。我过去注意到预设的顺序很重要，但最近没有证实这一点。我使用了“es2015”、“react”，然后是“stage-0”。@JohnWilliamDomingo我已经更正了代码示例，这样它就不会改变页面状态。实时站点代码实际上有很大的不同，也不会改变状态。感谢您指出这一点，这样其他人就不会从错误的代码示例中学习。@JohnWilliamDomingo直到一周前我们还在使用stage-0。当我意识到第0阶段中没有我们正在积极使用的东西时，我将它改为第1阶段，因此，我希望切换到第1阶段可以解决我们的上下文问题。但是，它没有。请详细说明

spec

选项的作用，以便我们了解它为什么有用？谢谢大家!@CiprianTomoiagă没有重命名

this

，而是尝试使用

.bind

来获得箭头式行为。2019年巴别塔仍然存在这个问题吗？同样的问题仍然存在。这是否因为缺少sourcemap功能而被阻止？@Bergi仍然是个问题，是的。这个问题有两个方面。Sourcemaps可能有足够的信息来扭转这一局面，但并非所有人都会这样做，而且由于给定源地图的确切行为定义不足，因此由地图的每个消费者决定他们想要从映射中推断多少数据。例如，如果你使用“映射范围”，Firefox现在可以很好地处理这些东西，因为我为它们编写了一些逻辑，可以推断出大量传统操作之外的东西，但这都是启发式的，默认情况下会关闭，因为它很慢。