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

我创建了一个 example on CodeSandbox 我认为这是你的问题,尽管我不确定。如果没有,请创建您自己的示例。相关代码包括在下面。

console.log(this, "hello") 记录 Square 对象+“您好”,如您所料。如果在 let y = 2 + 2

this: undefined
x: 2
y: undefined

当然 y let y x 正如预期的那样,定义了。 this 这 这 在调试器中,您需要使用 _this . 事实上,即使您在该行上放置了断点 设y=2+2 source map

我写的代码是:

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的内部结构(特别是它包装事件的方式),在调用处理程序时, 这 没有定义。如果您查看调用堆栈,就会发现 executeDispatch invokeGuardedCallbackAndCatchFirstError 显式值为 undefined 对于 context 对象的最终价值 这 这 _这个

我认为您需要设置babel选项来禁用模块处理。看看这个答案:

How to stop babel from transpiling 'this' to 'undefined'

在您的.LRC中:

{
  "presets": [
    [ "es2015", { "modules": false } ]
  ]
}

react dev tools 实际检查状态的插件。

这可能有点棘手,但这是一种选择。