react实现table数据倒计时，前提是当天的数据才倒计时

getFormatDate(curDate,date){//获取时间差curDate,date值为时间戳

    let firstDate = dateFormat(curDate,'yyyy-mm-dd')//dateFormat方法不做说明

    let secDate = dateFormat(date,'yyyy-mm-dd')

    let firTimer = new Date(firstDate)

    let secTimer = new Date(secDate)

    const diffDays = (secTimer.getTime() - firTimer.getTime()) / (24 * 60 * 60 * 1000); // 计算差值;

    console.log('差值');

    return Math.floor(diffDays)

  }

updateCountdown = () => {

    this.setState({

      allList: this.state.allList.map(item => {

        return {

          ...item,

          listUserTicket: item.listUserTicket.map(subItem => {

            let difference = subItem.endDate ? this.getFormatDate(subItem.now,subItem.endDate) : ''

            let timeLeft = '';

            if ((difference as any) === 0) {

              (timeLeft as any) = countTimeDown(subItem.endDate) + '后失效'

            }

            if ((difference as any) > 0) {

              timeLeft = '失效时间：' + (difference as any) + '天后失效'

            }

            if ((difference as any) < 0) {

              timeLeft = '00:00:00后失效'

            }

            if (timeLeft == '00:00:00后失效') {

              clearInterval(this.timer)

            }

            return {

              ...subItem,

              timeLeft

            };

          })

        };

      })

    })

  }

/**

 ** 倒计时

 **

 */

export const countTimeDown = (end) => {

    const now = new Date().getTime()

    const diff = end - now; // 时间差（毫秒）

    // console.log('倒计时的时间',now.getTime());

    // const diff = end - start; // 时间差（毫秒）

    // 如果时间差已经是负数，意味着已经过了今天的23:59:59

    if (diff < 0) {

        return "00:00:00";

    }

    const hours = Math.floor(diff / (1000 * 60 * 60));

    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    let str = (hours < 10 ? ('0' + hours) : hours) + ":" + (minutes < 10 ? ('0' + minutes) : minutes) + ":" + (seconds < 10 ? ('0' + seconds) : seconds) ;

    return str

};

//在获取数据时引用

getTabData(loadingType: 'load' | 'refresh') {

    let { page, size, tabFlag, allList } = this.state;

    let status = ''

    if (tabFlag == 1) {

      status = 'RECEIVE'

    }

    if (tabFlag == 2) {

      status = 'RECEIVE_UN_ACTIVATE'

    }

    if (tabFlag == 3) {

      status = 'OVERDUE'

    }  

    if (tabFlag == 4) {

      status = 'REVOKE'

    }  

    if (tabFlag == 5) {

      status = 'WRITE_OFF'

    }

    return new Promise((resolve, reject) => {

      this.setState(loadingType === 'load' ? { loading: LOAD_STATE.loading } : { refreshing: REFRESH_STATE.loading });

      React["$api"]({

        url: "/v1/appapi/market/ticket/queryUserRedPacketPage",

        param: {

          status,

          pageSize: size,

          pageIndex: page

        },

      }).then((res) => {

        let {respCode,result,respMsg} = res

        this.setState(loadingType === 'load' ? { loading: LOAD_STATE.success } : { refreshing: REFRESH_STATE.success });

        if (respCode == '000000') {

          if (!result?.length) {

            this.setState(loadingType === 'load' ? { loading: LOAD_STATE.complete } : { refreshing: REFRESH_STATE.success });

            loadingType === 'refresh' && this.setState({ onData: true, allList: [] });

            resolve(true)

          } else {

            let list = loadingType === 'load' ? [...allList, ...result] : result;

            this.setState({ allList: list, onData: false });

            this.updateCountdown()

            this.timer = setInterval(this.updateCountdown, 1000)

            resolve(true)

          }

        } else {

          reject(res)

          this.props.dispatch(toast({msg: respMsg}))

        }

      }).catch(()=>{

        this.setState(loadingType === 'load' ? { loading: LOAD_STATE.complete } : { refreshing: REFRESH_STATE.success });

      })

    });

  }

//页面渲染部分渲染

renderCoupons = data => {

    const { tabFlag, tabObj } = this.state

    return (

      data && data.map((act,index)=>(

        <div className="redEnvelope-box" key={act.campaignId}>

          <div className="cell-title">

            <p className="title">{act.campaignName}</p>

            <p className="next-title"><span>{tabObj[tabFlag]}红包金额：<span className="title-num">{act.sumCouponAmount}</span>元<span className="title-line">|</span><span onClick={()=>this.getRule(act)}><span>领取规则</span><span className="rule-icon"></span></span></span></p>

          </div>

          {act.listUserTicket && act.listUserTicket.map((ele, i) => (

            <div className="redEnvelope-cell" key={ele.userTicketNo}>

              <div className="cell-left">

                {tabFlag == 1 && <p className="left-logo logo-one"></p>}

                {tabFlag == 2 && <p className="left-logo logo-two"></p>}

                {tabFlag == 3 && <p className="left-logo logo-thr"></p>}

                {tabFlag == 4 && <p className="left-logo logo-four"></p>}

                {tabFlag == 5 && <p className="left-logo logo-fiv"></p>}

                <div className="cell-left-footer">

                  <p className={`left-icon ${(tabFlag != 1 && tabFlag != 2) && 'un-red-pack'}`}></p>

                  <div className="left-con">

                    <p className="left-con-num">{ele.coupon}元</p>

                    {tabFlag == 1 && <p className="left-con-time">{ ele.endDate ? ele.timeLeft : '' }</p>}

                    {tabFlag == 2 && <p className="left-con-time">生效时间：{ ele.beginDate ? this.getFormatDate(ele.now,ele.beginDate) : '' }</p>}

                    {tabFlag != 1 && tabFlag != 2 && <p className="left-con-time">{tabFlag == 3 ? '失效日期：' : tabFlag == 4 ? '作废日期：' : '提现申请日期：'}{ ele.operateTime ? dateFormat(ele.operateTime,'yyyy/mm/dd') : '' }</p>}

                  </div>

                </div>

              </div>

              {tabFlag == 1 && <div className="cell-right">

                {ele.timeLeft == '00:00:00后失效' && <Button disabled className="right-btn2">立即领取</Button>}

                {ele.timeLeft != '00:00:00后失效' && <Button onClick={() => this.openDrawBank(ele,act)} className="right-btn">立即领取</Button>}

              </div>}

              {tabFlag == 4 && <span className="tip-box" onClick={()=>this.openTipModel()}></span>}

            </div>

          ))}

        </div>

      ))

     

    )

  }