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

Question

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

Answer 1

由于Babel在箭头函数中如何处理词汇this，因此不能在箭头内使用this。像_this，_this2等临时变量在ES5中用来模仿词法this。

已编译的代码如下：

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

尽管由于源映射的原因，它看起来像调试器中的原始ES6源，但仍对ES5进行了评估。因此，_this局部变量需要调试。

Answer 2

它是undefined，因为您位于箭头函数中，并且根据定义，箭头函数不拥有上下文，但是它继承了封闭的上下文。

如果您选择了正确的菜单并向下滚动到当前范围，则会发现该函数的闭包链（在您的情况下，其中一个是组件类），该闭包链具有您的函数继承的this

例如

  

箭头函数本身没有此函数。这个值   使用了封闭的词汇范围；

Arrow functions doc