React-countdown-now 不更新渲染

Posted 2023-02-22

【中文标题】React-countdown-now 不更新渲染

【英文标题】：React-countdown-now not updating on render

【发布时间】：2019-01-08 10:28:45

【问题描述】：

我正在使用 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，同样的事情发生了。所以我想问题可能是你如何强制组件重新初始化自己？

谢谢！ 杰森

【参考方案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 中，当在组件上设置新日期时时钟会重新启动。

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

【讨论】：

在componentWillUnmount方法中取消异步任务。 componentWillUnmount() clearInterval(this.state.id);