在 Chrome 开发人员工具中未定义 React 'this' [重复]答案

【问题标题】：React 'this' is undefined in Chrome developer tools [duplicate]在 Chrome 开发人员工具中未定义 React 'this' [重复]
【发布时间】：2019-07-09 19:03:04
【问题描述】：

当我在 Chrome 开发人员工具的“源代码”选项卡中检查我的 React 代码时，我将鼠标悬停在“this.props”甚至“this”关键字上/将其添加到手表中时，它显示为未定义。即使引用的代码成功执行。很烦人……这是bug吗？有解决办法吗？

【问题讨论】：

请发文；代码是文本。 （除非你在 Piet/etc 中编程。）（并且图像可以作为附加信息。虽然我可能会包含一些周围的代码，以便我们可以看到完整的上下文。）

标签： reactjs google-chrome this

【解决方案1】：

它是undefined，因为你在一个箭头函数中，根据定义，箭头函数不拥有上下文，但它继承了封闭的上下文。

如果您检查右侧的菜单并向下滚动到当前范围，您会发现该函数的闭包链（在您的情况下将是组件类），其中的 this 由您的功能。

例如

箭头函数没有自己的 this。的这个值使用了封闭的词法范围；

Arrow functions doc

【讨论】：

【解决方案2】：

由于 Babel 在箭头函数中对词法 this 的处理方式，它不能是箭头内的 this。 _this、_this2等临时变量用于模仿ES5中的词法this。

转译后的代码如下：

var _this = this;
...
.then(function () {
  ...
  _this.setState(...);
});

尽管由于源映射，它在调试器中看起来像原始 ES6 源，但评估的是 ES5。所以需要调试的是_this局部变量。

【讨论】：