react-moment添加1小时失效，求助实现时段悬浮显示功能

我明白你遇到的困扰了——用react-moment的add方法想给小时加1小时生成时段，但结果和原小时完全一致，根本没生效对吧？这主要是两个常见的小问题导致的，咱们一步步来解决：

问题根源分析 #

1. 时间解析无效：如果value.hours只是纯数字（比如1、3），react-moment的<Moment>组件没办法把它正确解析成一个有效的时间对象，后续的add操作自然也就作用在无效的目标上，等于没执行。
2. 参数类型错误：你写的add={{ minutes : '60' }}里，minutes的值是字符串'60'，但moment的add方法要求数值必须是数字类型，字符串会被忽略或者解析失败。

解决方案 #

咱们先把小时数转换成moment能识别的有效时间（比如基于当天的起始时间加上对应小时），再正确使用add方法生成下一小时的时间，这样就能得到正确的时段范围了。

方法一：先构造moment实例再处理

import Moment from 'react-moment';
import moment from 'moment';

// 遍历小时数据时的处理逻辑
{yourHourDataset.map((value) => {
  // 构造当前小时的起始时间（比如当天的1:00 AM）
  const currentHour = moment().startOf('day').add(value.hours, 'hours');
  // 克隆当前实例并加1小时（避免修改原实例，因为moment是可变对象）
  const nextHour = currentHour.clone().add(1, 'hours');

  return (
    <div key={value.hours} className="bar-container">
      {/* 悬浮时显示的时段文本 */}
      <div className="bar-tooltip">
        <Moment format="h A">{currentHour}</Moment> - <Moment format="h A">{nextHour}</Moment>
      </div>
      {/* 你的条形图元素 */}
      <div className="bar" style={{ width: `${value.value}%` }}></div>
    </div>
  );
})}

方法二：直接在组件中传入有效时间并添加小时

如果不想单独构造moment实例，也可以直接在组件内完成处理：

{yourHourDataset.map((value) => {
  // 基于当天起始时间生成当前小时的时间对象
  const currentTime = moment().startOf('day').add(value.hours, 'hours');

  return (
    <div key={value.hours}>
      <div className="bar-tooltip">
        <Moment format="h A">{currentTime}</Moment> - 
        <Moment add={{ hours: 1 }} format="h A">{currentTime}</Moment>
      </div>
      {/* 条形图内容 */}
    </div>
  );
})}

额外提示 #

• 一定要确保value.hours是数字类型，如果是字符串（比如'1'），记得先转成数字：Number(value.hours)。
• Moment对象是可变的，如果直接对同一个实例调用add，会修改原对象的值，所以记得用clone()复制实例后再操作，避免出现意外的时间错误。

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