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：无法读取属性'state' 空

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

Answer 1

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

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

Answer 2

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

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

或者，您可以bind SentenceView类的功能。{/ p>

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

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

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

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

Answer 3

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

React - Uncaught TypeError：无法读取＆gt;的属性'state'空

3 个答案: