在 Chrome 开发人员工具中未定义 React 'this'

Question

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

Answer 1

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

如果您检查右侧的菜单并向下滚动到当前范围，您将找到该函数的闭包链（在您的情况下，其中一个将是组件类）具有this您的函数继承的。

例如

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

箭头函数文档

Answer 2

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

转译后的代码如下所示：

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

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