未在componentDidMount中更新状态

时间:2016-12-09 18:41:47

标签: javascript reactjs

我试图在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>
        )
    }
}

1 个答案:

答案 0 :(得分:4)

setTimeout的第一个参数是function - 你传递的不是function,而是它的返回值

要完成这项工作,您可以使用匿名函数包装setState,如下所示:

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