React中如何实现分钟数从00到09补零递增，到60后重置为00？

原代码错误点 #

• 类型错误：(0 + +prevMinutes).slice(-2) 中，0 + +prevMinutes 运算结果是数字类型，数字没有slice方法，运行时会直接抛出异常。
• 逻辑顺序错误：补零操作放在了+1运算之前，就算类型正确也得不到预期的补零结果。
• 边界判断错误：当前判断是+prevMinutes >= 60才返回'00'，会导致先出现值为'60'的情况，下次点击才会重置，不符合需求。
• 初始值判断冗余：初始state是'0'，!prevMinutes 的判断永远不会触发，属于无效逻辑。

修复后代码 #

const incrementMinutes = () => {
  setMinutes((prevMinutes) => {
    // 先转数字做数值运算
    const prevNum = +prevMinutes;
    // 加1后等于60直接重置为0，避免出现60的中间值
    const nextNum = prevNum + 1 === 60 ? 0 : prevNum + 1;
    // 统一格式化，不足两位自动补前导0
    return String(nextNum).padStart(2, '0');
  });
};

如果运行环境不支持padStart方法，可以替换返回逻辑为：

return nextNum < 10 ? `0${nextNum}` : String(nextNum);

逻辑说明 #

1. 统一先把上一轮的字符串类型分钟转成数字做运算，彻底避免类型错误
2. 加1后直接判断是否等于60，等于的话直接赋值为0，不会出现60的中间状态
3. 统一做格式化处理，小于10的数字自动补前导0，大于等于10直接转字符串，不需要多分支判断，逻辑更简洁不易出错
4. 初始值为'0'的场景下，第一次点击会计算得到1，格式化为'01'，完全符合需求要求

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