React中setProgressBarValue更新进度条时数值卡在29的问题

你的问题出在通过进度百分比反推已下载数量时的浮点数精度丢失，加上React的useState在浮点数相等判断时的特性，导致状态停止更新。

问题分析 #

当前代码通过Math.floor(oldProgressValue * totalCount)反推已下载记录数，但浮点数在计算机中是近似存储的：

• 比如当totalCount=100，进度值实际是0.2999999999999999（而非精确的0.3），Math.floor后得到的仍是29
• 即使你加1计算出30/100=0.3，但React在比较新旧浮点数状态时，可能因为二进制存储的细微差异，或者某些场景下新值和旧值被判定为相等，从而跳过状态更新

另外，这种"从百分比反推数量"的逻辑本身就容易出错，因为百分比是经过计算的近似值，不如直接维护已下载数量的整数状态可靠。

修复方案 #

直接维护resolvedCount（已下载记录数）的状态，再通过它计算进度百分比，彻底规避浮点数精度问题：

// 替换原有的progressBarValue状态
const [resolvedCount, setResolvedCount] = useState(0);
// 进度值通过计算得到，无需单独维护状态
const progressBarValue = resolvedCount / totalCount;

const updateProgress = (byAmount: number) => {
    // 直接更新已下载数量，确保每次递增准确
    setResolvedCount(prevCount => prevCount + byAmount);
};

为什么这个方案有效？ #

• resolvedCount是整数，不存在浮点数精度丢失问题，每次递增byAmount都能准确反映下载进度
• React对整数的相等判断是精确的，只要数值变化就会触发状态更新和重渲染
• 进度百分比的计算仅用于展示，不会影响进度的累计逻辑，避免了反向推导的误差

若必须保留原有进度状态的写法 #

如果因为某些原因不能新增resolvedCount状态，可以修改计算逻辑，避免Math.floor带来的精度丢失：

const updateProgress = (byAmount: number, totalCount: number) => {
    setProgressBarValue((oldProgressValue) => {
        // 用Math.round替代Math.floor，减少精度丢失的影响
        const prevResolvedCount = Math.round(oldProgressValue * totalCount);
        const newResolvedCount = prevResolvedCount + byAmount;
        // 确保进度不超过100%
        return Math.min(newResolvedCount / totalCount, 1);
    });
};

不过这种方案仍不如直接维护整数状态可靠，优先推荐第一种方案。

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