Reactjs 使用React从api创建倒计时

我一直在努力让我的倒计时正常工作，但似乎就是做不到。这就是我所能做到的，它可以工作，但是我收到一个关于内存泄漏的警告，我知道这不是正确的方法。get请求检索具有java LocalDateTime的对象

结束日期如下：2021年5月7日星期五12:00:00 GMT+0200

我一直遇到的一个问题是endDate已设置，但倒计时不会更新，所以它只会在1:00:00:59时出现

import React, { Fragment, useContext, useEffect, useState } from 'react';
import moment from 'moment';
import axios from 'axios';

const Countdown = () => {
  const [endDate, setEndDate] = useState();

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

  const calculateTimeLeft = () => {
    const then = moment(endDate);
    const now = moment();
    const countdown = moment(then - now);
    const days = countdown.format('D');
    const hours = countdown.format('HH');
    const minutes = countdown.format('mm');
    const seconds = countdown.format('ss');

    setDays(days);
    setHours(hours);
    setMinutes(minutes);
    setSeconds(seconds);
  };

  useEffect(() => {
    axios
      .get('/api/auction')
      .then((res) => {
        setEndDate(new Date(res.data.auctionEndDateTime));
      })
      .catch((error) => {
        console.log(error);
      });

    let intervalId;

    intervalId = setInterval(() => {
      calculateTimeLeft();
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    calculateTimeLeft();
    console.log('inside');
  }, [calculateTimeLeft]);

  return (
    <Fragment>
      <p>
        {' '}
        {days}:{hours}:{minutes}:{seconds}{' '}
      </p>
    </Fragment>
  );
};

export default Countdown;

import React，{Fragment，useContext，useffect，useState}来自'React'；
从“力矩”中导入力矩；
从“axios”导入axios；
常量倒计时=（）=>{
const[endDate，setEndDate]=useState（）；
const[days，setDays]=useState（'00'）；
常数[hours，setHours]=useState（'00'）；
const[minutes，setMinutes]=useState（'00'）；
常数[秒，设置秒]=使用状态（'00'）；
常量calculateTimeLeft=（）=>{
常数=力矩（结束日期）；
const now=力矩（）；
常数倒数=时刻（当时-现在）；
const days=countdown.format（'D'）；
const hours=countdown.format（'HH'）；
const minutes=countdown.format（'mm'）；
const seconds=countdown.format（'ss'）；
设置日（天）；
设定时间（小时）；
设置分钟（分钟）；
设置秒（秒）；
};
useffect（（）=>{
axios
.get（“/api/auction”）
。然后（（res）=>{
setEndDate（新日期（res.data.auctionEndDateTime））；
})
.catch（（错误）=>{
console.log（错误）；
});
让它有效；
intervalId=setInterval（（）=>{
calculateTimeLeft（）；
}, 1000);
return（）=>clearInterval（intervalId）；
}, []);
useffect（（）=>{
calculateTimeLeft（）；
console.log（'inside'）；
}，[calculateTimeLeft]）；
返回(

{' '}
{days}:{hours}:{minutes}:{seconds}{''}

);
};
出口默认倒计时；