Что не так с таймером?

Question

[PlasterTom]

Пример из туториала:

var Timer = React.createClass({
            getInitialState: function() {
                return {
                    seconds: 0
                };
            },
            componentDidMount: function() {
                this.timer = setInterval(this.tick, 1000);
            },
            tick: function() {
                this.setState({ seconds: this.state.seconds + 1 });
            },
            componentWillUnmount: function() {
                clearInterval(this.timer);
            },
            render: function() {
                return (
                    <h4> Уже прошло {this.state.seconds} секунд </h4>
                );
            }
        });
        ReactDOM.render(
            <Timer />,
            document.getElementById('mount-point')
        );

Мой аналогичный, но не рабочий (почему?) пример:

export default class Timer extends Component {
    
    constructor(props) {
        super(props);
        
        this.state = {
            seconds: 0
        }
    }
        
       
            componentDidMount() {
                this.timer = setInterval(this.tick, 1000);
            }
                
            tick() {
                this.setState({ seconds: this.state.seconds + 1 });
            }
        
            componentWIllUnMount() {
            clearInterval(this.timer);
            }
        
    
    
    render(){
        return(
        <h4>Уже прошло {this.state.seconds} секунд</h4>
        )
    }
}

В консоле выдает ошибку TypeError: Cannot read property 'seconds' of undefined
в строке this.setState({ seconds: this.state.seconds + 1 });

Answer 1

[Александр Петров]

При использовании React.createClass, все методы в компоненте автоматически биндятся. Поэтому this там не теряется.
При использовании ES6-классов такого уже не происходит. И поэтому внутри tick this уже теряется.
Исправить это можно простым биндингом:

this.timer = setInterval(this.tick.bind(this), 1000);

Comments

[kn1ght_t]

или переписать tick через:

tick = () => {
  this.setState({ seconds: this.state.seconds + 1 });
}

[Mikhail Osher]

В примере kn1ght_t нужен babel-plugin-transform-class-properties (во всяких create-react-app из коробки идет)