React.js中24小时制转12小时制函数失效问题求助

你的tConvert函数依赖正则表达式匹配HH:mm或HH:mm:ss格式的时间字符串，但你传入的是单个小时数字（比如13），转成字符串后是"13"，完全不符合正则的匹配规则，导致函数直接返回了原数字，没有执行12小时制转换逻辑。

方案1：修改tConvert函数，支持单个小时数字 #

调整函数逻辑，先判断输入是否是单个小时的格式，再做转换：

function tConvert(time) {
  // 先处理单个小时数字的情况
  const timeStr = time.toString();
  const singleHourMatch = timeStr.match(/^([01]\d|2[0-3])$/);
  if (singleHourMatch) {
    const hour = parseInt(singleHourMatch[0], 10);
    const period = hour < 12 ? 'AM' : 'PM';
    const formattedHour = hour % 12 || 12;
    return `${formattedHour} ${period}`;
  }

  // 保留原有的带分钟/秒的时间处理逻辑
  const fullTimeMatch = timeStr.match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/);
  if (fullTimeMatch) {
    const parts = fullTimeMatch.slice(1);
    parts[5] = +parts[0] < 12 ? 'AM' : 'PM';
    parts[0] = +parts[0] % 12 || 12;
    return parts.join('');
  }

  // 不符合格式的情况返回原内容
  return timeStr;
}

方案2：传入完整时间格式给原tConvert函数 #

不需要修改tConvert，而是在调用时传入HH:mm格式的字符串：

const updateCurrentTime = () => {
  const currentHour = new Date().getHours();
  const nextHour = (currentHour + 1) % 24;
  // 传入带分钟的时间字符串
  const hey = tConvert(`${currentHour}:00`);
  const bye = tConvert(`${nextHour}:00`);
  const formattedTime = `${hey} - ${bye}`;
  setCurrentTime(formattedTime);
};

你的初始useState直接用了new Date().getHours()，会显示单个数字，建议初始化时也执行一次转换逻辑：

const [currentTime, setCurrentTime] = useState(() => {
  const hour = new Date().getHours();
  const nextHour = (hour + 1) % 24;
  const hey = tConvert(hour); // 或者用方案2的`${hour}:00`
  const bye = tConvert(nextHour);
  return `${hey} - ${bye}`;
});

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