React Stepper返回按钮状态异常：Chrome下点击多次才生效

架构老林

2026-8-4

Stepper组件Back按钮在Chrome中状态更新延迟问题解决

问题分析

从代码和描述来看，Next按钮正常但Back按钮在Chrome中点击后状态不即时更新，核心可能有两个原因：

状态更新写法不一致导致的闭包问题：handleNext用了直接依赖当前activeStep的更新方式，而handleBack用了函数式更新，虽然Next暂时正常，但Chrome的渲染机制可能放大了这种写法差异带来的状态更新延迟。
Back按钮的显示条件与回退逻辑不匹配：当前Back按钮仅在activeStep > 1时显示，且回退逻辑限制activeStep !== 1才允许回退，当activeStep从2变为1时按钮会直接隐藏，容易让用户误以为状态没更新。

修复步骤

统一状态更新方式
将handleNext改成函数式更新，避免闭包捕获旧状态，确保每次更新都基于最新的前序状态：
```
const handleNext = () => {
  setActiveStep((prev) => prev + 1);
};
```
调整Back按钮的显示与回退逻辑（按需）
如果需要允许从步骤1回退到步骤0，修改以下两处：
- 回退条件改为判断activeStep > 0：
```
const handleBack = () => {
  if (activeStep > 0) {
    setActiveStep((prev) => prev - 1);
  }
};
```
- 按钮显示条件改为activeStep > 0，确保步骤1时也能看到Back按钮：
```
<Button
  color="inherit"
  onClick={handleBack}
  sx={{ mr: 1, display: activeStep > 0 ? "block" : "none" }}
>
  back
</Button>
```

强制Chrome重新渲染按钮（可选）
如果上述修改后仍有延迟，给Back按钮添加key属性，确保状态变化时按钮重新渲染：

<Button
  key={`back-step-${activeStep}`}
  color="inherit"
  onClick={handleBack}
  sx={{ mr: 1, display: activeStep > 1 ? "block" : "none" }}
>
  back
</Button>