React-countdown-now 不更新渲染

Question

我正在使用 React 和 Flux 创建一个 Mission Clock 网络应用。

代码可以在这里找到：https://github.com/jcadam14/Flux-Mission-Clock

现在它非常基础，我是 React 和 Flux 的新手，而且我已经很长时间没有接触过任何 JavaScript（从事单体 Java 应用程序业务太久了）。这是为了获得概念证明，以便我可以基于 React/Flux 进行设计。

基本概念是“下一次联系”计时器倒计时，当它在完成前 1 分钟到达时，计数器的方框会变为红色。然后当 NextContact 计时器完成时，CurrentContact 计时器启动，并且新的 NextContact 计时器应该启动。

在 NextContact 组件完成并应该使用新的 NextContact 更新之前，一切正常。组件中的文本和样式更新，但倒计时没有开始倒计时。它保持新值但不启动计时器。

每次由于其他原因发生渲染时，NextContact 组件都会再次更新一个新的时间，但不会开始计数。

但是，如果我在任何文件中保存任何更改（我正在使用带有 module.hot 活动的 Visual Studio Code），那么计数器就会启动并且实际上会在它应该在的地方找到。所以看起来有些东西并没有像我预期的那样完全呈现变化。

我尝试使用 forceUpdate 但没有任何效果，我尝试了各种获取 Counter 组件的方法但没有任何效果。

任何帮助将不胜感激。我希望一旦我搞定并理解所有调度的工作原理，应用程序的其余部分应该就位（计时器是应用程序的核心组件，其他一切都相当简单）。

编辑：我也尝试使用 Countdown 编写一个简单的计时器应用程序，但这次使用 Redux，同样的事情发生了。所以我想问题可能是你如何强制组件重新初始化自己？

谢谢！ 杰森

Answer 1

好吧，我最终只写了自己的计数器，这里是：

import React,{Component} from 'react';

const formatValues = ({days,hours,minutes,seconds}) =>
{
    const hourString = ('0' + hours).slice(-2);
    const minString = ('0'+ minutes).slice(-2);
    const secString = ('0' + seconds).slice(-2);
    return (days + ':' + hourString + ':' + minString + ':' + secString);
}

class MCCountdown extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            endDate:this.props.endDate,
            countdown:'0:00:00:00',
            secondRemaining:0,
            id:0
        }
        this.initializeCountdown = this.initializeCountdown.bind(this);
        this.tick = this.tick.bind(this);
    }

    componentDidUpdate(prevProps, prevState)
    {
        if(this.props.endDate !== prevProps.endDate)
        {
            clearInterval(prevState.id);
            this.setState({endDate:this.props.endDate});
            this.initializeCountdown();
        }
    }

    componentDidMount()
    {
        this.initializeCountdown();
    }

    tick() {
        const values = this.getTimeRemaining(this.state.endDate);
        this.setState({countdown:formatValues(values),secondRemaining:values.secondsLeft});
        if(values.secondsLeft <= 0)
        {
            clearInterval(this.state.id);
            if(this.props.onComplete)
            {
                this.props.onComplete();
            }
            return;
        }
        else
        {
            if(this.props.onTick)
            {
                this.props.onTick(this.state.secondRemaining);
            }
        }
      }

      getTimeRemaining(endtime){
        const total = Date.parse(endtime) - Date.parse(new Date());
        const seconds = Math.floor( (total/1000) % 60 );
        const minutes = Math.floor( (total/1000/60) % 60 );
        const hours = Math.floor( (total/(1000*60*60)) % 24 );
        const days = Math.floor( total/(1000*60*60*24) );
        return {
          secondsLeft: total,
          days,
          hours,
          minutes,
          seconds
        };
    }

    initializeCountdown(){
        const values = this.getTimeRemaining(this.state.endDate);
        const id = setInterval(() => this.tick(),1000);
        this.setState({id:id,countdown:formatValues(values),secondRemaining:values.secondsLeft});
      }

    render()
    {
        const {countdown} = this.state;
        return(<div>{countdown}</div>);
    }
}

export default MCCountdown

这成功了。似乎我尝试过的计时器/计数器可能缺少该 componentDidUpdate() 方法，因为一旦我将其添加到我的 MCCountdown 中，当在组件上设置新日期时时钟会重新启动。

不确定这是否是最漂亮的，但它确实有效，我现在对此非常满意。