React JS实现倒计时功能使用setInterval仅首卡片显示问题求助

• 所有Timer组件都复用了相同的id="tmr"，HTML中id属性全局唯一，document.getElementById("tmr")只会匹配页面中第一个出现的对应id元素，因此所有定时器的更新都只会作用到第一张赛事卡片的倒计时位置，其余卡片无内容更新。
• 未遵循React声明式渲染逻辑，直接操作原生DOM修改内容，且组件每次重渲染都会重复创建新的setInterval定时器，没有做定时器清理逻辑，会引发内存泄漏问题。

重写Timer组件，使用React的状态管理和副作用钩子实现倒计时，避免直接操作DOM，同时处理定时器的清理逻辑：

import { useState, useEffect } from 'react';

const Timer = (props) => {
  const [timeText, setTimeText] = useState('');

  useEffect(() => {
    const countDownDate = new Date(
      `${props.remainingDate} ${props.remainingTime}`
    ).getTime();

    // 先执行一次计算，避免首次渲染空白
    const calculateTime = () => {
      const now = new Date().getTime();
      const distance = countDownDate - now;
      
      if (distance < 0) {
        setTimeText('赛事已开始');
        return;
      }
      
      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
      
      setTimeText(`${days}d ${hours}h ${minutes}m ${seconds}s`);
    };

    calculateTime();
    const timer = setInterval(calculateTime, 1000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(timer);
  }, [props.remainingDate, props.remainingTime]);

  return <span>{timeText}</span>;
};

export default Timer;

内容的提问来源于stack exchange，提问作者vijay kumar