Состояние не обновляется в компонентеDidMount

Question

Я пытаюсь создать таймер обратного отсчета в React. Я понял, что componentDidMount будет вызываться сразу после render, и поэтому я могу использовать его для вызова setState с текущим временем после одной второй задержки. Как так:

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

Однако, в то время как componentDidMount вызывается (я проверил с console.log), состояние не обновляется. Как я могу получить componentDidMount, чтобы обновить состояние и, таким образом, повторно отобразить компонент с новым временем?

Вот полный класс:

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

первый параметр setTimeout является function - то, что вы передаете не function, но возвращаемое значение

, чтобы сделать эту работу вы можете обернуть setState с анонимной функцией:

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