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

IT技术 reactjs google-chrome this
2021-04-09 14:55:48

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

在此处输入图片说明

2个回答

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

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

例如

在此处输入图片说明

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

箭头函数文档

由于thisBabel 在箭头函数中处理词法的方式,它不能this在箭头内。临时变量如_this_this2等用于模仿thisES5 中的词法

转译后的代码如下所示:

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

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