Question

我正在尝试调试create-react-app，当我在箭头函数上放置断点时，在this关键字中有无效值，并且停止断点的行为完全奇怪（devtools不允许将断点放在有效的js表达式上，它似乎已禁用断点。我在FF和Chrome浏览器上都进行了检查。但是，当我将箭头函数（()=>{}）更改为function(){}声明时，调试行为是正确的，没有人知道问题是什么以及什么反应启动项目，您会建议在正确调试箭头功能的地方进行调试吗？

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

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

this应该为App，但事实并非如此。尽管应用程序的行为是正确的，但它在此特定的断点处是undefined。我怀疑源地图有问题...通过正确处理源地图的webpack正确设置在那里的反应项目是什么？

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>
    );
  }
}

在这里，我们将回调函数用作参考，并将其绑定到out构造函数中。

另一种替代方法是使用箭头功能。在这种情况下，您不需要绑定功能。另外，我们在这里使用类字段，因此根本不需要使用构造函数。

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 props 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;

在create-react-app中调试es6

2 个答案: