@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 });
  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
При использовании React.createClass, все методы в компоненте автоматически биндятся. Поэтому this там не теряется.
При использовании ES6-классов такого уже не происходит. И поэтому внутри tick this уже теряется.
Исправить это можно простым биндингом:
this.timer = setInterval(this.tick.bind(this), 1000);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы