Der Status wird in componentDidMount nicht aktualisiert.

Question

Ich versuche in React einen Countdown-Timer zu erstellen. Mein Verständnis war, dass componentDidMount sofort nach render aufgerufen werden, und so kann ich es verwenden, um setState mit der aktuellen Zeit nach einer Verzögerung von einer Sekunde aufzurufen. Wie so:

componentDidMount() { 
    setTimeout(this.setState({ now: this.getTime() }), 1000) 
} 

Doch während componentDidMount wird aufgerufen wird (I mit console.log markiert) ist, wird der Zustand nicht aktualisiert. Wie kann ich componentDidMount erhalten, um den Zustand zu aktualisieren und so die Komponente mit einer neuen Zeit neu zu rendern? Hier

ist die vollständige Klasse:

class Timer extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      now: this.getTime(), 
      end: this.getTime() + 180 
     } 
    } 

    getTime() { 
     return (Date.now()/1000) 
    } 

    formatTime() { 
     let remaining = this.state.end - this.state.now 
     let rawMinutes = (remaining/60) | 0 
     let rawSeconds = (remaining % 60) | 0 
     let minutes = rawMinutes < 10 ? "0" + rawMinutes : rawMinutes 
     let seconds = rawSeconds < 10 ? "0" + rawSeconds : rawSeconds 
     let time = minutes + ":" + seconds 
     return time 
    } 

    componentDidMount() { 
     setTimeout(this.setState({ now: this.getTime() }), 1000) 
    } 

    render() { 
     return(
      <div id="countdown"> 
       { this.formatTime() } 
      </div> 
     ) 
    } 
} 

Answer 1

erste Parameter von setTimeout ist function - was Sie vorbei ist kein function, aber der Rückgabewert

um diese Arbeit zu machen Sie Ihre setState wickeln könnte mit anonymer Funktion wie folgt:

setTimeout(() => this.setState({ now: this.getTime() }), 1000)