我在这里做错了什么？当前时间到 2 分钟倒计时

Question

这里有什么问题我在这里使用 moment js 将当前时间创建为 2 分钟倒计时我正在逐步解决问题计时器在 1:59 停止而不是在 1:59

之后减少时间

const CountDownTimer = () => {
  const [duration, setDuration] = useState(null);

  const getFinalTime = useCallback((duration) => {
    const currentDuration = moment.duration(duration, "milliseconds");
    let finalMinutes = currentDuration?.minutes();
    let finalSeconds = currentDuration?.seconds();
    finalMinutes = finalMinutes < 10 ? `0${finalMinutes}` : finalMinutes;
    finalSeconds = finalSeconds < 10 ? `0${finalSeconds}` : finalSeconds;
    return `${finalMinutes}:${finalSeconds}`;
  }, []);

  useEffect(() => {
    const startTimer = moment(billData?.createdAt);
    const endTimer = moment(billData?.createdAt).add(2, "minutes");
    const duration = moment.duration(endTimer.diff(startTimer), "milliseconds");
    const interval = setInterval(() => {
      const newDuration = moment
        .duration(duration - 1000, "milliseconds")
        .asMilliseconds();
      setDuration(newDuration);
    }, 1000);
    return () => clearInterval(interval);
  }, [billData?.createdAt]);

  // in getFinalTime passing duration

  return <>{getFinalTime(duration)}</>;
};

export default CountDownTimer;

Answer 1

您似乎为倒数计时器做了很多不必要的工作。

下面是一个简单的实现。

计时器组件接受截止日期 Date 对象。
计时器组件具有内部状态，可确保它通过效果每秒更新一次。
计算剩余时间就是计算当前时间和截止时间之间的毫秒差，然后是div/mod操作来提取分钟和秒。（您可以添加另一个 div/mod 以获得小时和分钟。）

function CountdownTimer({ deadline }) {
  const [, setUpdate] = React.useState(0);
  React.useEffect(() => {
    const interval = setInterval(() => {
      setUpdate((u) => u + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  const timeLeftTotal = Math.max(
    0,
    Math.ceil((+deadline - +new Date()) / 1000)
  );
  const timeLeftMinutes = Math.floor(timeLeftTotal / 60);
  const timeLeftSeconds = timeLeftTotal % 60;
  const mmss = [timeLeftMinutes, timeLeftSeconds]
    .map((s) => String(s).padStart(2, "0"))
    .join(":");
  return <div>Time left: {mmss}</div>;
}

function getDeadline(secondsInFuture) {
  return new Date(+new Date() + secondsInFuture * 1000);
}

function App() {
  const [deadline, setDeadline] = React.useState(() => getDeadline(120));
  return (
    <div className="App">
      <CountdownTimer deadline={deadline} />
      <hr />
      <button onClick={() => setDeadline(getDeadline(60))}>
        Reset deadline to 1 minute in the future
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

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

我在这里做错了什么？当前时间到 2 分钟倒计时

what wrong i am doing here? curunt time to 2 minutes countdown

javascript

momentjs

reactjs