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

【问题标题】：what wrong i am doing here? curunt time to 2 minutes countdown我在这里做错了什么？当前时间到 2 分钟倒计时
【发布时间】：2021-10-20 10:57:29
【问题描述】：

这里有什么错误我在这里使用时刻 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;

【问题讨论】：

你没有告诉我们它有什么问题，所以很难说。
什么不起作用？有错误代码吗？这需要更多信息。
@AKX 描述已更新
@Kantivekariya 您甚至没有在您粘贴的代码中使用getFinalTime 函数。
@AKX 他们只是通过持续时间

标签： javascript reactjs momentjs

【解决方案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>

【讨论】：