Chrome、Firefox 调试器未在 React 应用程序中显示“this”的正确值

这是 React 组件类中的一些代码（使用 CRA 2 搭建脚手架）

  click = () => {
    console.log(this, "hello");
    let x = 1 + 1; //This is just here to let chrome put a break point here. 
  }

当此代码运行时，它将把组件对象打印到控制台。

但是 - 如果我将调试器附加到该点，Chrome (68) 和 Firefox (63) 都会将“this”显示为未定义。

这里发生了什么？

这与用于将 click 创建为类属性的 transform-class-properties babel 插件有关吗？

Edit:是的，看起来确实如此。

如果我们手动绑定该方法，例如：

  constructor() {
    super();
    this.click2 = this.click2.bind(this);
  }

  click2() {
    console.log(this, "hello");
    let x = 1 + 1;
  }

然后就可以正常工作了。

无论如何 - 有没有一种方便的方法来解决这个问题，这样我就不必放入所有这些绑定语句？

我创建了一个CodeSandbox 上的示例我认为重现了你的问题，尽管我不确定。如果没有，请创建您自己的示例。相关代码包含在下面。

在此示例中，代码运行良好。console.log(this, "hello") logs a Square正如你所期望的，对象+“你好”。如果你在let y = 2 + 2行，Chrome 调试器将显示

this: undefined
x: 2
y: undefined

当然，y是未定义的，因为let y语句尚未执行。x已定义，如预期的那样。this是未定义的，因为 React 和 Babel 在幕后跳过了很多圈子，并且this事实上，是未定义的。如果您想访问this从调试器中，您需要使用_this。事实上，即使你在线上放置了一个断点let y = 2 + 2，这不是正在执行的实际源代码或实际断点所在的位置。您所看到的是由源图它允许您查看并在您编写的代码上设置断点，尽管实际运行的代码完全不同（Babel 等处理的结果）。

我写的代码是：

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    };
  }

  click = () => {
    console.log(this, "hello");
    let x = 1 + 1; //This is just here to let chrome put a break point here.
    let y = 2 + 2; //This is just here to let chrome put a break point here.
  };

  render() {
    return (
      <button className="square" onClick={this.click}>
        {this.props.value}
      </button>
    );
  }
}

实际运行的代码是：

var Square =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Square, _React$Component);

  function Square(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Square);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Square).call(this, props));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "click", function () {
      console.log((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "hello");
      var x = 1 + 1; //This is just here to let chrome put a break point here.

      var y = 2 + 2; //This is just here to let chrome put a break point here.
    });
    _this.state = {
      value: null
    };
    return _this;
  }

  (0, _createClass2.default)(Square, [{
    key: "render",
    value: function render() {
      return _react.default.createElement("button", {
        className: "square",
        onClick: this.click
      }, this.props.value);
    }
  }]);
  return Square;
}(_react.default.Component);

由于 React.js 的内部结构（特别是它包装事件的方式），在调用处理程序时，this未定义。如果你查看调用堆栈，你会发现executeDispatch calls invokeGuardedCallbackAndCatchFirstError明确值为undefined为了context对象最终的价值this在回调里面。当你编写代码时，React 和 Babel 会尝试向你隐藏所有这些，但它们无法完全向调试器隐藏这些，特别是在以下方面：this，所以这种情况你得去实际的代码中看看需要参考_this在调试器中。