React ES6 state?

Question

[Григорий Дикий]

Доброго времени суток. Не так давно я познакомился с React и использовал нотацию ES5, но решил перейти на ES6 и получаю ошибку: Uncaught TypeError: Cannot read property 'timeout' of undefined, хотя в конструкторе переменная есть:

import React from 'react';

class PomidoroTimer extends React.Component {
  constructor(props) {
     super(props);
     this.intervals = [];
     this.state = {
         timeout: 25 * 60
     };
  }

  componentWillMount() {
    this.setInterval(this.decrimentTimer, 1000);
  }

  setInterval() {
    this.intervals.push(setInterval.apply(null, arguments));
  }

  decrimentTimer() {
    this.setState({timeout: this.state.timeout - 1});
  }

  componentWillUnmount() {
    this.intervals.map(clearInterval);
  }

  updateTimeout(timeout) {
    this.setState({ timeout: timeout });
  }

  render() {
    return (
      <div className="timer">
        <div className="timer-block">
          <div className="timer__digit-block">
            <div className="digits">58</div>
            <div className="timer__digit-block-text">Минут</div>
          </div>
          <div className="timer__separator"></div>
          <div className="timer__digit-block">
            <div className="digits">44</div>
            <div className="timer__digit-block-text">Секунд</div>
          </div>
        </div>
      </div>
    );
  }
}

export default PomidoroTimer;

Answer 1

[Григорий Дикий]

Решилось все через bind:

constructor(props) {
     super(props);
     this.intervals = [];
     this.state = {
         timeout: 25 * 60
     };

     // Bind Methids
     this.decrimentTimer = this.decrimentTimer.bind(this);
  }

Answer 2

[Дмитрий Беляев]

componentWillMount() {
    this.setInterval(() => this.decrimentTimer(), 1000);
  }

Answer 3

[Антон]

Вопрос решен, но все же подскажу 2 варианта

1. сахар для bind

componentWillMount() {
    this.setInterval(::this.decrimentTimer, 1000);
  }

2. arrow function

decrimentTimer = () => this.setState({timeout: this.state.timeout - 1});

Comments

[Григорий Дикий]

не встречался с синтаксисом ::this.decrimentTimer, наверное он из ES7

[Дмитрий Беляев]

Григорий Дикий: данный оператор находится на стадии предложения в стандарт и может быть в веден в редакции es2017 или es2018

Answer 4

[Слава]

Очевидно надо было ещё задержаться на es5, чтобы подтянуть базовые вещи типа контекста :)