在reactjs中获取计数器上的时间负值

Question

我得到的是负面计数器，这对我来说是个小问题，我也是个新手，所以请帮助我，除了结果我还想得到避免这些错误的提示和技巧，我也得到了消极的时间，不仅是天，而且是小时，秒和分钟。

我的代码是-：

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

const Clock = () => {

    const  [days, setDays] = useState();
    const  [hours, setHours] = useState();
    const  [minutes, setMinutes] = useState();
    const  [seconds, setSeconds] = useState();
    
    let interval;

    const countDown = () => {
        const destination = new Date('Oct 22, 2022').getTime();
        interval = setInterval(() => {
            const now = new Date().getTime();
            const different = destination - now ;
             const seconds = Math.floor((different / 1000) % 60);
             const minutes = Math.floor((different / 1000 / 60) % 60);
             const hours = Math.floor((different / (1000 * 60 * 60)) % 24);
             const days = Math.floor(different / (1000 * 60 * 60 * 24));


            if(destination < 0) clearInterval(interval.current);
            else{
                setDays(days)
                setHours(hours)
                setMinutes(minutes)
                setSeconds(seconds)
            }
        })
    }

    useEffect(() => {
        countDown();
    })

  return (
    <div className="clock__wrapper d-flex align-items-center gap-3">
        <div className="clock__data d-flex align-items-center gap-3">
            <div className='text-center'>
                <h1 className='text-white fs-3 mb-2'>{days}</h1>
                <h5 className='text-white fs-6'>Days</h5>
            </div>
            <span className='text-white fs-3'>:</span>
        </div>
        <div className="clock__data d-flex align-items-center gap-3">
            <div className='text-center'>
                <h1 className='text-white fs-3 mb-2'>{hours}</h1>
                <h5 className='text-white fs-6'>Hours</h5>
            </div>
            <span className='text-white fs-3'>:</span>
        </div>
        <div className="clock__data d-flex align-items-center gap-3">
            <div className='text-center'>
                <h1 className='text-white fs-3 mb-2'>{minutes}</h1>
                <h5 className='text-white fs-6'>Minute</h5>
            </div>
            <span className='text-white fs-3'>:</span>
        </div>
        <div className="clock__data d-flex align-items-center gap-3">
            <div className='text-center'>
                <h1 className='text-white fs-3 mb-2'>{seconds}</h1>
                <h5 className='text-white fs-6'>Seconds</h5>
            </div>
        </div>
    </div>
    
  )
}

export default Clock

Answer 1

setTimeout就足够了，因为一旦您需要更新diff，更新的diff (放入useEffect依赖数组)将再次自动执行该函数，这将再次触发setTimeout

我单独制作了calculateDiffFromNow，它可以在另一个组件中使用，它会使您的组件变得更干净。

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


function calculateDiffFromNow(date: Date) {

  const now = new Date().getTime();
  const different = date.getTime() - now;

  const seconds = Math.floor((different / 1000) % 60);
  const minutes = Math.floor((different / 1000 / 60) % 60);
  const hours = Math.floor((different / (1000 * 60 * 60)) % 24);
  const days = Math.floor(different / (1000 * 60 * 60 * 24));

  return {
    days,
    hours,
    seconds,
    minutes
  }
}


const Clock = ({ destination }: { destination: Date }) => {

  // only store the new differece between now and your destination
  const [diff, setDiff] = useState(calculateDiffFromNow(destination));


  useEffect(() => {
    setTimeout(function calculateTheNewDiff(){

      let newDiff = calculateDiffFromNow(destination)
      let canBeUpdated = newDiff.seconds >= 0 && newDiff.minutes >= 0 && newDiff.hours >= 0 && newDiff.days >= 0;

      if (canBeUpdated)
        setDiff(newDiff);

    }, 1000);
  }, [diff]);


  return (
    <div className="clock__wrapper d-flex align-items-center gap-3">
      <div className="clock__data d-flex align-items-center gap-3">
        <div className='text-center'>
          <h1 className='text-white fs-3 mb-2'>{diff.days}</h1>
          <h5 className='text-white fs-6'>Days</h5>
        </div>
        <span className='text-white fs-3'>:</span>
      </div>
      <div className="clock__data d-flex align-items-center gap-3">
        <div className='text-center'>
          <h1 className='text-white fs-3 mb-2'>{diff.hours}</h1>
          <h5 className='text-white fs-6'>Hours</h5>
        </div>
        <span className='text-white fs-3'>:</span>
      </div>
      <div className="clock__data d-flex align-items-center gap-3">
        <div className='text-center'>
          <h1 className='text-white fs-3 mb-2'>{diff.minutes}</h1>
          <h5 className='text-white fs-6'>Minute</h5>
        </div>
        <span className='text-white fs-3'>:</span>
      </div>
      <div className="clock__data d-flex align-items-center gap-3">
        <div className='text-center'>
          <h1 className='text-white fs-3 mb-2'>{diff.seconds}</h1>
          <h5 className='text-white fs-6'>Seconds</h5>
        </div>
      </div>
    </div>

  )
}



function App() {
  return (
    <div className="App">
      <Clock destination={new Date('2022-10-22T09:50:01.400Z')} />
    </div>
  );
}

export default App;
```jsx

希望你觉得有用