Question

我必须将倒计时设定为每个月的15号。我能够成功获得倒数到15日所需的差值。但在那之后我老实说不知道我在做什么。

计算差异后，我计算天数，小时数，分数，秒数。

我收到错误无法读取属性Days Null

export default React.createClass({
tick: function(){

var currentDate = new Date();
var date_till_15 = new Date()

if(currentDate.getDate() < 15){
    var days_till_15 = 15 - currentDate.getDate();
    date_till_15 = new Date(date_till_15.setDate(currentDate.getDate() + days_till_15 ));
}else if(currentDate.getDate() > 15){
    date_till_15 = new Date(date_till_15.setMonth(currentDate.getMonth() + 1));
    date_till_15 = new Date(date_till_15.setDate(15));
}
    var difference =  date_till_15 - currentDate;
    var daysLeft = 0, hoursLeft = 0, minutesLeft = 0, secondsLeft = 0;
    if(difference > 0){
        daysLeft = Math.floor( difference / (1000*60*60*24) );
        difference -= daysLeft * (1000*60*60*24);
        hoursLeft = Math.floor( difference / (1000*60*60) );
        difference -= hoursLeft * (1000*60*60);
        minutesLeft = Math.floor( difference / (1000*60) );
        difference -= minutesLeft * (1000*60);
        secondsLeft = Math.floor( difference/1000 );

      this.setState({
        days: daysLeft,
        hours: hoursLeft,
        minutes: minutesLeft,
        seconds: secondsLeft
      });
  } else {
        clearInterval( this.timeInterval );
        this.setState({expired: true});
    }
},

componentDidMount: function(){
    this.timeInterval = setInterval( this.tick.bind(this), 1000);
},

render() { 
    return <div> <div> this.state.days</div>

           </div>
}

Answer 1

组件首次呈现时，this.state不存在，这就是this.state.days抛出该错误的原因。要解决此问题，您可以创建初始状态，也可以仅在this.state存在时呈现值：

render() { 
    return <div>{this.state && this.state.days}</div>
}

无法让倒数计时器工作

1 个答案: