在 create-react-app 中调试 es6

Question

我正在尝试调试create-react-app，当我在箭头函数上设置断点时，this 关键字内部的值无效，并且停止断点的行为完全奇怪（开发工具不允许在一个有效的 js 表达式，它看起来像禁用断点。我检查了 FF 和 Chrome 浏览器。但是，当我将箭头函数 (()=>{}) 更改为 function(){} 声明时，调试行为是正确的。有谁知道问题是什么，你会推荐什么反应启动项目正确调试箭头函数？

我在 App.js 中的代码看起来像 here。尝试在该行内放置一个断点：

this.setState({value: this.state.value + 1})

this 应该是 App 但事实并非如此。尽管应用程序的行为是正确的，但在此特定断点处是 undefined。我怀疑 sourcemaps 出了点问题……有哪些 react 项目可以通过 webpack 正确处理 sourcemaps？

Answer 1

不使用 let that = this 之类的东西，您可以通过几种不同的方式在 JSX 属性中使用回调函数。

如果您想直接将其用作匿名函数，您可以这样使用：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
    };
  }

  render() {
    return (
        <button onClick={(function () {
          this.setState(prevState => ({ value: prevState.value + 1 }));
        }).bind(this)}>
        Click me
        </button>
    );
  }
}

您在此处直接将函数绑定到this。我没有看到任何这样的例子。通常人们使用这样的东西：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({ value: prevState.value + 1 }));
  }

  render() {
    return (
        <button onClick={this.handleClick}>
        Click me
        </button>
    );
  }
}

这里我们使用我们的回调函数作为引用并将其绑定到构造函数中。

另一种选择是使用箭头函数。对于这种情况，您不需要绑定您的函数。此外，我们在这里使用类字段，因此根本不需要使用构造函数。

class App extends React.Component {
  state = { value: 0 };
  handleClick = () => {
    this.setState(prevState => ({ value: prevState.value + 1 }));
  }

  render() {
    return (
        <button onClick={this.handleClick}>
        Click me
        </button>
    );
  }
}

在 JSX 道具 this' 范围更改的回调中，它不再引用该类。因此，要么将其绑定到this，要么使用不会改变this 范围的箭头函数。

Answer 2

在这些情况下，有时调试工具可能难以为 lambda 函数正确放置断点。或许你可以通过临时将debugger添加到你的源代码中来达到同样的效果，如下所示，强制断点命中：

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value: 0,
        };
    }

    render() {

        return (
            <div className="App">
                <header className="App-header" onClick={() => {

                    debugger; // ADD THIS: It will act as a breakpoint and force the developer-tools to break so you can step through the code

                    this.setState({value: this.state.value + 1})
                }}>
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h1 className="App-title">Welcome to React, the state is {this.state.value}</h1>
                </header>
                <p className="App-intro">
                To get started, edit <code>src/App.js</code> and save to reload.
                </p>
        </div>);
    }
}

export default App;