React-Circular-Progressbar点击+10秒按钮动画延迟1秒问题求助

问题根源 #

你代码中点击+10秒按钮时，用setTimeout延迟1秒更新进度条的duration状态，但计时器数值是立即更新的，这直接导致了两者不同步。

修复方案 #

1. 移除不必要的延迟逻辑 #

修改handleAddTen函数，直接同步更新duration和timeLeft，不需要用setTimeout包裹状态更新：

const handleAddTen = () => {
  setDuration(prev => prev + 10);
  setTimeLeft(prev => prev + 10);
};

2. 优化状态关联（可选） #

为避免维护两个独立状态带来的同步风险，可以让timeLeft始终基于duration初始化，点击按钮时同步重置：

// 初始化时让timeLeft等于duration
const [duration, setDuration] = useState(60);
const [timeLeft, setTimeLeft] = useState(duration);

// 点击按钮时同步更新两个状态
const handleAddTen = () => {
  const newDuration = duration + 10;
  setDuration(newDuration);
  setTimeLeft(newDuration);
};

这样修改后，点击+10秒按钮时，计时器数值和环形进度条的动画会立即同步更新，不会再有延迟。

内容的提问来源于stack exchange，提问作者5C6 purushotham Reddy