阵营倒计时错误

Question

我实现了一个香草JS倒计时进入反应成分如下：

import React, { Component } from 'react'; 

class CustomCountDown extends Component { 
    constructor(props) { 
     super(props); 

     this.endTime; 
     this.msLeft; 
     this.time; 
     this.hours; 
     this.mins; 
     this.element; 
    } 

    twoDigits(n){ 
     return (n <= 9 ? "0" + n : n); 
    } 

    updateTimer() { 
     this.msLeft = this.endTime - (+new Date); 
     if (this.msLeft < 1000) { 
      element.innerHTML = "countdown's over!"; 
     } else { 
      this.time = new Date(this.msLeft); 
      this.hours = this.time.getUTCHours(); 
      this.mins = this.time.getUTCMinutes(); 
      this.element.innerHTML = (this.hours ? this.hours + ':' + this.twoDigits(this.mins) : this.mins) + ':' + this.twoDigits(this.time.getUTCSeconds()); 
      setTimeout(this.updateTimer, this.time.getUTCMilliseconds() + 500); 
     } 
    } 

    countdown(elementName, minutes, seconds) { 
     this.element = document.getElementById(elementName); 
     this.endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500; 
     this.updateTimer(); 
    } 

    componentDidMount() { 
     this.countdown("count", 1, 30); 
    } 

    render() { 
     return(
      <div id="count"> 
      </div> 
     ); 
    } 
} 

export default CustomCountDown; 

我想不通为什么我收到以下错误：

Answer 1

当你通过this.updateTimer到setTimeout你松散的上下文，即this不再指向你的组件实例。你需要保持上下文两种方式：

setTimeout(this.updateTimer.bind(this), this.time.getUTCMilliseconds() + 500); 

setTimeout(() => this.updateTimer(), this.time.getUTCMilliseconds() + 500); 

作为一个更好的选择，你可以在构造结合updateTimer。这不会创造新的功能，每次updateTimer被称为：

constructor(props) { 
    // ... 

    this.updateTimer = this.updateTimer.bind(this); 
}