Question

我有以下代码：

class App extends Component {

  constructor(){
    super()
    //this.buttonOneClick = this.buttonOneClick.bind(this);
  }

  buttonOneClick() {
    const { setTestData } = this.props;

    setTestData("test");
  }

  render() {
    const { testData } = this.props;
    return (
      <div className="App">
        <h1>Test App</h1>
        <div>{testData}</div>
        <button onClick={this.buttonOneClick}>Test</button>
      </div>
    );
  }
}

使用react-redux的connect方法导出组件App，将setTestData - 函数映射到道具（setTestData来自哪里）。

当我设置buttonOneClick()处理程序而不将组件上下文绑定到它时（请参阅constructor()中我的代码中的out outmented行），我收到以下错误：

无法阅读属性＆＃39;道具＆＃39;未定义的

我理解道具不会被定义，因为处理程序是在全局上下文中执行的，它不知道道具但是我如何理解它意味着this本身没有被定义的错误这对我没有意义。为什么会这样？不应该总是在任何执行环境中定义this吗？

提前致谢

Answer 1

这不应该总是在任何执行上下文中定义吗？

没有

严格模式下没有隐式this值。

"use strict";

function example() {
    alert(this);
}

example();

Answer 2

我们收到错误，因为当onClick调用我们的buttonOneClick（）函数时，未定义此。

通常，您可以通过将 this 绑定到buttonOneClick函数来解决此问题，因此它始终保持不变。所以我们必须在构造函数中绑定它。

this.buttonOneClick = this.buttonOneClick.bind(this);

如果您不想使用绑定，可能的解决方法是使用es2015 javascript箭头函数

buttonOneClick = () => console.log(this.props);

箭头功能没有自己的这个所以它会在其上下文中使用 this ，这是我们的Component。这称为 Lexical Scoping

为什么＆＃39;这个＆＃39;本身在功能范围内未定义

2 个答案: