使用 useEffect 从日期开始倒计时，包括天数、小时数、分钟数、秒数

Question

我从定义的日期开始倒计时，我快要让它工作了，但我没有遇到问题

我刚开始使用 ReactJS，显然我的类型不对我需要有天、小时、分钟和秒的倒计时，我使用了 useEffect 来实现我不知道它是否最适合

TypeError: Assignment to constant variable. getTime2

42 | hours = hours-(days*24);

import React, { useState, useEffect } from 'react';

const Countdown = () => {
  const[rDay, setRDay] = useState(0);
  const[rHour, setRHour] = useState(0);
  const[rMin, setRMin] = useState(0);
  const[rSec, setRSec] = useState(0);

function getTime2() {
   const date_future = new Date(
    Date.UTC(2021, 11, 22, 18, 0, 0),
  ).getTime(); 
   const date_now = new Date();

   const seconds = Math.floor((date_future - (date_now))/1000);
   const minutes = Math.floor(seconds/60);
   const hours = Math.floor(minutes/60);
   const days = Math.floor(hours/24);
    
   hours = hours-(days*24);
   minutes = minutes-(days*24*60)-(hours*60);
   seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);
   
   setRDay(days);
   setRHour(hours);
   setRMin(minutes);
   setRSec(seconds);
}

   useEffect(()=>{
    setInterval(function(){
      getTime2()
    }, 1000);
  }, []);


  return(
    <div className="timer-container">
      <div className="numbers">
      <span className = "num-span">{("0" + rDay).slice(-2)}</span>
        <span className = "segment">:</span>
        <span className = "num-span">{("0" + rHour).slice(-2)}</span>
        <span className = "segment">:</span>
        <span className = "num-span">{("0" + rMin).slice(-2)}</span>
        <span className = "segment">:</span>
        <span className = "num-span">{("0" + rSec).slice(-2)}</span>
      </div>
      <div class="sub-numbers">
      <span className = "sub-span">Day(s)</span>
        <span></span>
        <span className = "sub-span">H</span>
        <span></span>
        <span className = "sub-span">Min</span>
        <span></span>
        <span className = "sub-span">Sec</span>
      </div>
     
    </div>
    
  );
};


export default Countdown;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您正在重新分配已使用 const 声明为常量的变量。将 const 更改为 let 并且 TypeError 应该消失：

   let seconds = Math.floor((date_future - (date_now))/1000);
   let minutes = Math.floor(seconds/60);
   let hours = Math.floor(minutes/60);
   let days = Math.floor(hours/24);
    
   hours = hours-(days*24);
   minutes = minutes-(days*24*60)-(hours*60);
   seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);

使用 useEffect 从日期开始倒计时，包括天数、小时数、分钟数、秒数

Countdown from date with days, hours, minutes, secondes with useEffect

javascript

reactjs

use-effect