У меня есть следующий кусок кода. По сути, это просто кнопка с обработчиком событий, и класс должен содержать некоторое состояние, которое на данный момент является только счетчиком, изначально равным 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' из null

Я знаю, что эта ошибка не редкость, но я еще не нашел решения здесь.

0
George Welder 10 Янв 2017 в 22:58

3 ответа

Лучший ответ

Попробуйте добавить это в свой конструктор внизу:

this.getNextSentence = this.getNextSentence.bind(this);
3
MDiesel 10 Янв 2017 в 20:01

Вам необходимо привязать метод к классу в функции constructor, а затем ссылаться на него так же, как вы делаете это в своем вопросе в своем обработчике onClick.

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

В качестве альтернативы вы можете bind передать функцию в класс SentenceView.

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

Однако, как объяснил Джеффри Абдалла в комментарии ниже, связывание в рендере создаст новую функцию для каждого рендера.

Другой вариант - использовать функции arrow ES6 в вашем методе render.

<button onClick={() => this.getNextSentence()}>
0
Paul Fitzgerald 10 Янв 2017 в 20:13

Компонент не связывается автоматически this с методами, подобными createClass. Вам необходимо связать this с getNextSentence в конструкторе (или вы можете использовать синтаксис инициализатора свойства es7 для выполнения привязки в самом классе.) Подробнее здесь

0
Geoffrey Abdallah 10 Янв 2017 в 20:13