Question

我想要实现的目标是，从现在开始倒计时到目标日期。 componentDidMount()内：

nowT = moment(new Date()).format("X"); // => 1603551057 (2020-10-24)
targetDay = moment(result.data.created_at).add('30', 'days').format("X"); // => 1606143175 (2020-11-23)
diffTime = targetDay - nowT; // => 2592000
remain = moment.duration(diffTime, 'milliseconds'); // => {milliseconds: 0, seconds: 11, minutes: 43, hours: 0, days: 0, …}

let intervalId = setInterval(this.countdown(remain), 1000);
this.setState({
  counter: intervalId
});

首先，我得到now和targetday并计算差值，然后将余数发送到间隔。这是countdown函数：

countdown = (r) => {
  let remain = moment.duration(r - 1000, 'milliseconds');
  this.setState({
    currentCount: remain.days() + ':' + remain.hours() + ":" + remain.minutes() + ":" + remain.seconds()
  });
  console.log(remain.days() + ':' + remain.hours() + ":" + remain.minutes() + ":" + remain.seconds()); // => 0:0:43:11
}

问题是它返回错误的倒计时0:0:43:11，也不会在render中更新，只是显示此静态倒计时，而不是动态倒计时。我做错了什么？

Answer 1

实际上，不需要计算duration，一旦获得then和now之间的差，就可以得到想要的：

this.interval = setInterval(() => {
  nowT = moment();
  targetDay = moment(result.data.created_at).add('30', 'days');
  diffTime = moment(targetDay - nowT);
  timeObj = {
    count_days: diffTime.format('D');
    count_hours: diffTime.format('HH');
    count_minutes: diffTime.format('mm');
    count_seconds: diffTime.format('ss');
  }
}, 1000);

现在您可以使用setState来获取render中的值

Answer 2

您正在调用函数this.countdown()，该函数直接返回值，而不是将函数引用传递到要传递参数的位置。

如果我要从字面上解释您的代码，那么您现在正在做的是：

// pseudo-code, serves only as example
setInterval(void, 1000)

当你想做的事情

// pseudo-code - serves only as example
setInterval(this.countdown, 1000)
// this is fine as long as we don't have to pass arguments ^

为此，您必须将函数作为带有参数的回调传递给

setInterval(() => this.countdown(remain), 1000)

最后，请不要忘记在clearInterval()中的componentWillUnmount()中使用，否则您的应用程序可能会发生内存泄漏。

ReactJS MomentJS天数倒计时

2 个答案: