React计算器连续点击操作符按钮时如何更新operation参数

你的问题核心在于：当前chooseOperation方法中，当用户连续点击操作符时，第一次点击后current会被置为空，第二次点击会触发if (current === "") return;直接返回，导致operation无法更新。

不需要添加额外状态，只需要修改chooseOperation的逻辑，同时修复compute方法中的异步setState冲突问题：

修改后的完整关键代码 #

1. 更新chooseOperation方法 #

chooseOperation = (op) => {
  const { previous, current } = this.state;
  
  // 如果当前有输入的数字，走正常计算/切换流程
  if (current !== "") {
    if (previous !== "") {
      this.compute();
    }
    this.setState((prevState) => ({
      operation: op,
      previous: prevState.current,
      current: "",
    }));
  } else {
    // 当前无输入数字，说明是连续点击操作符，直接替换当前操作符
    this.setState({
      operation: op,
    });
  }
};

2. 修复compute方法的setState合并问题 #

原来的compute中两次setState会导致状态覆盖，合并为一次：

compute = () => {
  let computation;
  const { previous, current, operation } = this.state;
  const prev = parseFloat(previous);
  const curr = parseFloat(current);
  if (isNaN(prev) || isNaN(curr) || !operation) return;

  switch (operation) {
    case "+":
      computation = prev + curr;
      break;
    case "-":
      computation = prev - curr;
      break;
    case "*":
      computation = prev * curr;
      break;
    case "÷":
      computation = prev / curr;
      break;
    default:
      return;
  }

  this.setState({
    current: computation.toString(),
    operation: "",
    previous: `${previous} ${operation} ${current}`,
  });
};

逻辑说明 #

• 当用户输入数字后点击操作符：正常触发计算（如果已有上一个数字），然后记录当前操作符，将当前数字移到previous，清空current。
• 当用户连续点击操作符（此时current为空）：直接替换state中的operation为新的操作符，无需其他操作。
• 修复compute中的setState合并，避免异步更新导致的状态不一致问题。

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