javascript - react : Error referencing a function within state

Question

问题看似简单，但我不知道如何解决:

• 在render中声明的Add-Button-Function工作得很好
• 在 state 中声明的 Add-Button 本身不起作用。正如代码已经提到的，它将抛出“TypeError:无法读取未定义的属性'state'”-Error

class App extends Component {
  constructor() {
    super();

    this.state = {
      someArrayOfObjects: [{
          attr: 
             // SNIP ...
                // Doesn't work!
                // When clicked leads to this error: "TypeError: Cannot read property 'state' of undefined"
                <button onClick={this.doAction}>Add</button>
             // SNIP ...
        }]
    };

    this.doAction = this.doAction.bind(this);
  }

  // SNIP ...
  doAction() {
    console.log(this.state);
  }

  render() {
      return(
          // SNIP...
          // Works just fine
          <button onClick={this.doAction}>Add</button>
      )
  }
}

我错过了什么？

Answer 1

您需要在state之前绑定(bind)函数doAction

constructor() {
    super();

    this.doAction = this.doAction.bind(this);

    this.state = {
      someArrayOfObjects: [{
          attr: 
             // SNIP ...
                // Doesn't work!
                // When clicked leads to this error: "TypeError: Cannot read property 'state' of undefined"
                <button onClick={this.doAction}>Add</button>
             // SNIP ...
        }]
    };

  }

编辑:您需要在创建状态之前绑定(bind)该函数。在状态中创建按钮时，this.doAction 引用组件类的原型(prototype)方法。但你can't pass a method as a callback directly ，所以你需要绑定(bind)它。 Function.prototype.bind creates a new function ，然后将其分配给构造函数中创建的实例:

this.doAction = this.doAction.bind(this);

因此，也许令人困惑的是，this.doAction 引用了代码中不同位置的两个不同函数。您想要将绑定(bind)版本传递给处理程序(请参阅上面的链接了解原因)，因此您需要在创建该按钮之前绑定(bind)它。