有什么方法可以在反应js中进行时间倒计时吗？

Question

这是我的 main.js 文件，我正在尝试添加倒数计时器， 但它显示在第一张卡片中，而不是所有其他卡片中 .请帮我解决。

    import { Grid } from "@mui/material";
    import Timer from "../MainPage/Timer";
    import Card from "@mui/material/Card";
    import CardContent from "@mui/material/CardContent";
    import Typography from "@mui/material/Typography";
    
    const Main = (props) => {
      const getMain = () => {
        return (
          // return console.log(props);
          <Card sx={{ m: 2, width: 400 }}>
            <CardContent>
              <Grid container spacing={2}>
                <Grid item>
                  <span className="ui top attach label">
                    {/* Match {match["Match"]} */}
                    Match {props.match.Match}
                  </span>
                </Grid>
                <Grid item>
                  <Typography variant="h5" component="div">
                    {/* {match["Team_A"]} */}
                    {props.match.Team_A}
                  </Typography>
                </Grid>
                <Grid item>
                  <Typography sx={{ mb: 1.5 }} color="text.secondary">
                    {/* {match["Date"]}
                     */}
                    {props.match.Date}
                  </Typography>
                  <Typography sx={{ mb: 1.5 }} color="text.secondary">
                    {
                      <Timer
                        remainingDate={props.match.Date}
                        remainingTime={props.match.Time}
                      />
                    }
                  </Typography>
                </Grid>
                <Grid item className="ui right aligned">
                  <Typography variant="h5" component="div">
                    {/* {match["Team_B"]} */}
                    {props.match.Team_B}
                  </Typography>
                </Grid>
              </Grid>
            </CardContent>
          </Card>
        );
      };
      // setInterval(getMain, 1000);
      return getMain();
    };
    export default Main;

Timer.js file 

const Timer = (props) => {
  // console.log(props);

  var countDownDate = new Date(
    props.remainingDate + " " + props.remainingTime
  ).getTime();

  // Update the count down every 1 second
  // var x = setInterval(function () {
  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  return days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
};

export default Timer;

如果不使用 setInterval 则显示剩余时间 卡片，但是当我使用 setInterval 时，它只显示在第一个 卡片 。下面是带有 setInterval 的代码。

without the use of setInterval

Timer.js

const Timer = (props) => {
  // console.log(props);

  var countDownDate = new Date(
    props.remainingDate + " " + props.remainingTime
  ).getTime();

  // Update the count down every 1 second
  var x = setInterval(function () {
    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor(
      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("tmr").innerHTML =
      days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
  }, 1000);
  return (
    <div>
      <span id="tmr"></span>
    </div>
  );
};

export default Timer;

with the setInterval the output am getting is

Answer 1

查看此第三方库。它会让你的生活更加舒适，就像我的生活一样。 https://www.npmjs.com/package/react-compound-timer

Answer 2

这可能是因为您通过 id 将内容设置在同一元素上。

document.getElementById("tmr").innerHTML = ...;

所有卡片项目的计时器的 ID 相同，它取代了一个。

尝试从道具创建动态 ID 并使用它。

const Timer = (props) => {
   const { timerId } = props;
   const timerEleId = `tmr${timerId}`;
   .
   .
   .
   document.getElementById(timerEleId).innerHTML = ...;
   .
   .
   .
   return (
    <div>
      <span id={timerEleId}></span>
    </div>);
}

另外，您正在使用反应，为什么要使用声明方式通过 id 获取元素并设置它？您应该使用带有 setIntervals 的 useEffects 上的状态更新。类似的东西：Fetch data from external Api with reactjs hooks in every 10 seconds