尝试使用UseEffect在react.js中创建一个倒计时天：小时：分钟：秒

如何解决尝试使用UseEffect在react.js中创建一个倒计时天：小时：分钟：秒

正如标题所述，我试图创建一个始于

的倒计时

4 days : 23 hours : 59 minutes : 59 seconds，倒数至0 days: 0 hours : 0 minutes : 0 seconds

到目前为止，我有以下内容

import * as React from "react";

const Countdown = (props) => {
  const [seconds,setSeconds] = React.useState(2);
  const [minutes,setMinutes] = React.useState(2);
  const [hours,setHours] = React.useState(2);
  const [days,setDays] = React.useState(4);
  const [timeDone,setDone] = React.useState(false);
 //SECONDS

  //seconds 60 -> 0
  React.useEffect(() => {
    const secondsCounter =
      seconds > 0 && setInterval(() => setSeconds(seconds - 1),1000);
    return () => clearInterval(secondsCounter);
  },[seconds]);

  //seconds == 60 (when seconds == 0)
  React.useEffect(() => {
    return () => setSeconds(2);
  },[seconds == 0 && !timeDone ]);

//MINUTES

  //Minutes 60 -> 0  (when seconds == 0)
  React.useEffect(() => {
    return () => setMinutes(minutes-1)
  },[seconds == 0]);

  //Minutes == 60 (when minutes == 0)
  React.useEffect(() => {
    return () => setMinutes(2);
  },[minutes == 0 && !timeDone]);

//HOURS

  //hours 24 => 0 (when minutes == 0)
  React.useEffect(() => {
    return () => setHours(hours - 1);
  },[minutes == 0]);

  //hours == 23 (when hours == 0)
  React.useEffect(() => {
    return () => setHours(2);
  },[hours == 0 && !timeDone]);

//DAYS
  //days 5 => 0 (when hours == 0)
  React.useEffect(() => {
      return () => setDays(days-1);
  },[hours == 0 && !timeDone])

//DONE

  React.useEffect(() => {
      return () => setDone(true)
  },[days == 0 && hours == 0 && minutes == 0 && seconds == 0])


  return (
    <div>
      <p>
        countdown: {days} : {hours} : {minutes} : {seconds}
      </p>
    </div>
  );
};
export default Countdown;

但是它没有按我预期的那样工作，+每分钟的分钟数就会减少2分钟，与小时数相同，似乎useEffect被执行了2次，我不明白为什么。

解决方法

您的所有useEffects实际运行2​​次

最初，您的（seconds == 0）为false，当秒数变为0时，它变为true，useEffect运行一次，然后将其设置为59，现在（seconds == 0）再次为false，再次运行useEffect 。同一件事发生了几分钟，几小时等等。当useEffect分别变为0和59时都运行。相反，只有在bool cond为true时，才应该将值设置为59

,

我认为这可以进一步简化为类似的东西。 您呈现的值仅取决于当前时间，其他所有内容仅是相对于this

的timeLeft时间的推导

function calculateTimeLeft() {
  const year = new Date().getFullYear();
  const difference = +new Date(`${year}-10-1`) - +new Date();
  let timeLeft = {};

  if (difference > 0) {
    timeLeft = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),hours: Math.floor((difference / (1000 * 60 * 60)) % 24),minutes: Math.floor((difference / 1000 / 60) % 60),seconds: Math.floor((difference / 1000) % 60)
    };
  }

  return timeLeft;
}

export default function App() {
  const [timeLeft,setTimeLeft] = React.useState(calculateTimeLeft());

  React.useEffect(() => {
    const id = setTimeout(() => {
      setTimeLeft(calculateTimeLeft());
    },1000);

    return () => {
      clearTimeout(id);
    };
  });

  const timerComponents = Object.keys(timeLeft).map(interval => {
    if (!timeLeft[interval]) {
      return;
    }

    return (
       <span>
        {timeLeft[interval]} {interval}{" "}
      </span>
    )
  });

  return (
    <div>
      {timerComponents.length ? timerComponents : <span>Time's up!</span>}
    </div>
  );
}

您可以在此处看到工作示例-> https://stackblitz.com/edit/react-t86icp