Question

首先，我的代码有效，问题更多是关于良好实践，而我是React的新手。

我想做的是一个简单的倒计时，而我在使用

时遇到了问题

this.setState(...)

未定义的地方。

代码现在为：

componentDidMount(){
    this.updateCountdown();
}

updateCountdown(){

    var countDownDate = new Date("Dec 14, 2019 12:00:00").getTime();

    var parent = this;        

    var x = setInterval(function(){
        var distance = countDownDate - new Date().getTime();

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        parent.setState(state => ({
            countdown : {
                seconds : seconds,
                minutes : minutes,
                hours : hours,
                days : days
            }
        }));

        if(distance < 0){
            clearInterval(x);
        }

    }, 1000)
}

您可以看到我这样做

var parent = this;

以便我可以使用

parent.setState(...)

在setInterval函数中，但是我觉得可能有一种更简洁的方法，是吗？

谢谢

Answer 1

componentDidMount(){
    this.updateCountdown();
}

updateCountdown(){
    var countDownDate = new Date("Dec 14, 2019 12:00:00").getTime();
    var x = setInterval(() =>{
        var distance = countDownDate - new Date().getTime();

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

       this.setState(state => ({
            countdown : {
                seconds : seconds,
                minutes : minutes,
                hours : hours,
                days : days
            }
        }));

        if(distance < 0){
            clearInterval(x);
        }

    }, 1000)
}

这是从另一个函数中的一个函数更新React组件状态的良好实践吗？

1 个答案: