React JS计算器点击clear按钮后旧数值复现的bug如何修复？

问题根源 #

该bug是clear操作没有同步清空所有关联的状态变量导致的：仅更新了显示层的数值，存储历史输入的状态字段仍然保留了清除前的值，后续输入数字时触发了旧值和新数字的拼接逻辑，就会出现旧值复现的问题。

修复步骤 #

1. 调整App.js中clear事件的处理逻辑 #

找到handleClear事件处理函数，补全所有关联状态的清空逻辑，示例如下：

// 修正前的错误写法（仅更新显示值）
const handleClear = () => {
  setDisplayValue('0');
}

// 修正后的写法（同步清空所有关联状态）
const handleClear = () => {
  setDisplayValue('0');
  setPreviousValue(''); // 清空存储的历史计算值
  setOperator(''); // 清空已选中的运算符号
  setWaitForNewValue(false); // 重置新输入标记位
}

2. 排查Display.js的状态逻辑 #

Display组件仅负责渲染展示，不要在内部维护独立的数值状态，所有显示值统一从App.js通过props传入，避免父子组件状态不同步：

// Display.js 参考写法
const Display = ({ value }) => {
  return <div className="calculator-display">{value}</div>
}

3. 校验数字键点击的处理逻辑 #

确认数字点击函数handleNumberClick的替换逻辑正常，当当前显示值为0时直接用新数字替换，而非拼接：

const handleNumberClick = (num) => {
  const numStr = num.toString();
  if (displayValue === '0' || waitForNewValue) {
    setDisplayValue(numStr);
    setWaitForNewValue(false);
  } else {
    setDisplayValue(prev => prev + numStr);
  }
}

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