React计算器clear后0无法覆盖及严格模式八进制字面量报错如何解决

问题原因&修复方案 #

1. 前导0不消失的问题 #

你按下clear按钮时将myDisplay设置为了数字类型的0，后续输入执行拼接逻辑时，会触发数字转字符串的隐式转换，比如0 + '3'的结果是'03'，所以前导0会一直保留。

2. 严格模式不允许八进制字面量的报错 #

这个报错是前导0衍生的问题：当你拼接出以0开头的数字字符串（比如'07'）时，eval执行时会把这类字符串识别为八进制字面量，React默认开启严格模式，不允许八进制字面量的语法，所以触发报错。

修复步骤 #

• 调整clear逻辑：将重置值改为空字符串，或者保留为数字0的同时，在拼接新输入前做判断，如果当前值是0/空，就直接用新输入值替换，不走拼接逻辑
• 新增前导0校验：拼接输入后如果出现长度>1的前导0字符串，自动删掉多余的前导0，避免eval识别为八进制字面量
• 修正状态更新的依赖问题：你当前的状态更新用了函数式更新，但后续的判断逻辑拿的还是更新前的myDisplay，会出现状态不同步的问题，统一走函数式更新逻辑处理

修复后参考代码 #

// 数字按键输入逻辑
setMyDisplay((prev) => {
  const inputVal = event.target.className
  // 如果当前是初始0/空，直接返回新输入的值
  if (prev === 0 || prev === '' || prev === '0') {
    return inputVal
  }
  // 正常拼接新输入
  return prev + inputVal
})

if(event.target.id === 'equals'){
  setMyDisplay((prev) => {
    // 替换掉开头多余的前导0再计算，避免八进制报错
    const calcExp = prev.replace(/^0+(?=\d)/, '')
    return eval(calcExp)
  })
} else if(event.target.id === 'clear'){
  // 重置为空字符串或者字符串'0'都可以，不要用数字0
  setMyDisplay('')
}

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