React Reducer计算器问题：.match失效与运算后操作报错

问题1：连续点击运算符时阻止逻辑失效 #

核心原因 #

• 正则表达式以字符串形式定义（'/^[*+-/]*$/'），而非RegExp对象，导致match无法正常工作。
• charAt参数错误使用数组包裹（[string.length - 1]），应该直接传入数字索引。
• 正则匹配逻辑错误：原正则匹配全运算符字符串，但需求是匹配最后一个字符为运算符。

修复后的关键代码 #

case ACTIONS.CHOOSE_OPERATION: 
  if(action.payload && state.currentOperand == null) {
    return state 
  } 
  // 检测最后一个字符是否为运算符
  const lastChar = state.currentOperand?.slice(-1);
  // 匹配运算符（转义-避免字符集范围冲突）
  const isLastCharOperator = /[*+\-/.]/.test(lastChar);
  if(isLastCharOperator) {
    console.log("operator present")
    return state;
  }
  // 原有逻辑：计算并更新状态
  const numbers = state.currentOperand.split(/([-+*/])/g)
  const result = evaluateNum(numbers[0], numbers[1], numbers[2])
  return {...state, currentOperand: result}
  // 后续其他分支逻辑...

问题2：计算后点击运算符/DEL按钮报错 #

核心原因 #

• evaluateNum返回数字类型，后续操作（如substring、includes）是字符串方法，数字调用这些方法会抛出错误。
• 状态更新时未保留原状态的prevOperand、operation字段，直接返回{currentOperand: result}导致状态缺失。

修复后的关键代码 #

1. 修改evaluateNum返回字符串：

function evaluateNum(prevOperand, operation, currentOperand){
   let prevNum = parseFloat(prevOperand)
   let currentNum = parseFloat(currentOperand)
   let result;
   if (operation === '+'){     
       result = prevNum + currentNum
   } else if(operation === '-') {
      result = prevNum - currentNum 
   } else if(operation === '*') {
      result = prevNum * currentNum
   } else if(operation === '/' && currentOperand!= '0') {
      result = prevNum / currentNum
   }
   // 将结果转为字符串，避免后续字符串方法报错
   return result?.toString() || '0';
}

2. 确保状态更新时保留原字段：

// CHOOSE_OPERATION分支的返回
return {...state, currentOperand: result}

// EVALUATION分支的返回
return {...state, currentOperand: result}

3. 增强DELETE_DIGIT分支的兼容性：

case ACTIONS.DELETE_DIGIT:
  // 先转为字符串，避免数字调用substring报错
  const currentStr = state.currentOperand?.toString() || '';
  // 删除后为空则显示0
  const newCurrent = currentStr.substring(0, currentStr.length - 1) || '0';
  return {...state, currentOperand: newCurrent}

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