在Chrome开发人员工具中未定义React'this' [英] React 'this' is undefined in Chrome developer tools

问题描述

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

When I inspect my React code in the Chrome developer tools 'Source' tab, and I hover over the 'this.props' or even 'this' keyword / add it to watches, it shows up as undefined. Even though the code referred to executes successfully. Very annoying.... is this is bug? Is there a workaround for this?

推荐答案

之所以是undefined，是因为您在箭头函数中，并且根据定义，箭头函数不拥有上下文，而是继承了封闭的上下文.

It's undefined because you're inside an arrow function and by definition an arrow function doesn't own a context but it inherits the enclosing one.

如果您检查右侧的菜单并向下滚动到当前作用域，则会发现该函数的闭包链(在您的情况下，其中一个是组件类)具有由您的继承的this功能.

If you check the menu on the right handside and scroll down to the current scope you will find the closure chain of that function (one of which in your case will be the component class) that has the this inherited by your function.

例如

箭头功能没有它自己的功能.这个值 使用了封闭的词汇范围；

An arrow function does not have its own this. The this value of the enclosing lexical scope is used;

箭头函数文档

这篇关于在Chrome开发人员工具中未定义React'this'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！