是否有任何方法可以在react 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的代码。

而不使用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;

使用setInterval得到的输出是

Answer 1

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

Answer 2

这可能是因为您在同一元素上设置了id的内容。

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

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

尝试从props中创建动态id并使用它

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

另外，你正在使用react，为什么使用声明式的方式通过id获取元素并设置它?您应该使用setinterval对useEffects进行状态更新。类似的:每10秒用reactjs钩子从外部Api获取数据