React - 未捕获的类型错误：无法读取 > null 的属性“状态”

Question

我有以下代码。它基本上只是一个带有事件处理程序的按钮，并且该类应该保持某种状态，到目前为止，它只是一个计数器，最初设置为 0。

import React, { Component } from 'react';
// import styles from './SentenceView.css';

export default class SentenceView extends Component {

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

  getNextSentence() {
    console.log(this.state.count); // this &
    this.setState({count: 2}); // this gives me an error
    console.log("Executed");
  }

  render() {
    return (
      <div>
        {/* <div className={styles.container}> */}
        <div>
          <h1>SentenceView</h1>
          <button onClick={this.getNextSentence}>Next Sentence</button>
        </div>
      </div>
    );
  }
}

当我点击 getNextSentence 按钮时，我得到：

SentenceView.js:14 Uncaught TypeError: Cannot read property 'state' of 空

我知道这个错误并不少见，但我还没有在这里找到任何解决方案。

Answer 1

尝试将其添加到底部的构造函数中：

this.getNextSentence = this.getNextSentence.bind(this);

Answer 2

组件不会像 createClass 这样的方法自动绑定 this。您需要在构造函数中将 this 绑定到 getNextSentence（或者您可以使用 es7 属性初始化器语法在类本身中进行绑定。）阅读更多 here

Answer 3

您需要将该方法绑定到constructor 函数中的类，然后以与您在onClick 处理程序中的问题相同的方式引用它。

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.getNextSentence = this.getNextSentence.bind(this);
  }

或者，您可以将bind 函数添加到SentenceView 类。

<button onClick={this.getNextSentence.bind(this)}>

但是，正如 Geoffrey Abdallah 在下面的评论中所解释的，在渲染中绑定将为每个渲染创建一个新函数。

另一种选择是在您的 render 方法中利用 ES6 的 arrow 函数。

<button onClick={() => this.getNextSentence()}>