kann Countdown-Timer nicht funktionieren

Question

Ich muss einen Countdown bis zum 15. eines jeden Monats festlegen. Ich kann den Differenzwert, der zum Countdown benötigt wird, erfolgreich auf den 15. Level bringen. Aber danach weiß ich ehrlich gesagt nicht, was ich mache.

Nach Berechnung der Differenz berechne ich die Tage, Stunden, Minuten, Sekunden.

ich den Fehler nicht Eigenschaft Tage 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

Das erste Mal Ihre Komponente macht, this.state nicht vorhanden ist, lesen, weshalb this.state.days diesen Fehler wirft. Um dies zu lösen, können Sie entweder einen Anfangszustand, erstellen oder nur den Wert machen, wenn this.state vorhanden:

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