toLocaleTimeString()时间字符串渲染重叠问题求解（不改24小时制）

你的计时器出现字符串重叠，主要有两个核心原因：一是组件重复创建定时器导致状态更新混乱，二是12小时制时间字符串长度不固定，引发容器宽度变化导致视觉重叠。以下是针对性的解决方法：

1. 修复定时器重复创建问题 #

当前代码中setInterval直接写在组件函数内，每次组件渲染都会创建新的定时器，多个定时器同时触发会导致时间更新混乱。需要用useEffect钩子控制定时器的创建与销毁：

import { useState, useEffect } from 'react';

function App() {
  const [currTime, setCurrTime] = useState(new Date().toLocaleTimeString());

  function getTime() {
    setCurrTime(new Date().toLocaleTimeString());
  }

  useEffect(() => {
    // 仅在组件挂载时创建一次定时器
    const timerId = setInterval(getTime, 1000);
    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(timerId);
  }, []);

  return (
    <div className="container">
      <h1>{currTime}</h1>
      <button onClick={getTime}>Get Time</button>
    </div>
  );
}

export default App;

2. 解决12小时制字符串重叠问题 #

12小时制的时间字符串长度不固定（比如9:59:59 AM和10:00:00 AM字符数不同），会导致容器宽度动态变化，引发视觉重叠。可以通过两种方式解决：

方法一：使用等宽字体（推荐） #

等宽字体中每个字符宽度一致，无论字符串长度如何变化，整体宽度保持稳定，彻底避免重叠和跳动：

h1 {
  font-size: 100px;
  font-family: monospace; /* 启用等宽字体 */
  white-space: nowrap; /* 防止时间字符串换行 */
}

.container {
  margin: 60% auto;
  text-align: center; /* 让内容居中对齐 */
}

方法二：设置固定宽度 #

给h1设置足够容纳最长12小时制时间的固定宽度，确保所有时间都能完整显示：

h1 {
  font-size: 100px;
  width: 450px; /* 根据字体大小调整，需覆盖"11:59:59 PM"这类最长字符串 */
  margin: 0 auto;
  white-space: nowrap;
}

.container {
  margin: 60% auto;
  text-align: center;
}

内容的提问来源于stack exchange，提问作者Amit Pal