React中动态修正分销商百分比计算以确保总和为100%

核心逻辑说明 #

• 先算出所有分销商百分比的总和，保留两位小数后计算和100%的偏差值
• 偏差值的绝对值乘以100，就是需要调整的次数：比如总和是100.05%，偏差0.05，对应调整5次；总和99.97%，偏差-0.03，对应调整3次
• 把数据按百分比从高到低排序，取前N条记录（N是调整次数）：
  • 总和超100%：每条减0.01%
  • 总和不足100%：每条加0.01%
• 调整百分比后同步更新Total列（假设Total是总金额基数乘以百分比计算而来）

实现代码 #

替换原项目中的App.js代码即可：

import { useState } from "react";

function App() {
  // 示例分销商数据，可根据实际结构调整
  const [distributors, setDistributors] = useState([
    { id: 1, name: "分销商A", percentage: 33.33, total: 333.3 },
    { id: 2, name: "分销商B", percentage: 33.33, total: 333.3 },
    { id: 3, name: "分销商C", percentage: 33.34, total: 333.4 },
  ]);
  // 总金额基数，根据实际业务替换
  const totalAmount = 1000;

  // 计算当前百分比总和（保留两位小数）
  const getTotalPercentage = () => {
    const sum = distributors.reduce((acc, item) => acc + item.percentage, 0);
    return parseFloat(sum.toFixed(2));
  };

  const adjustTo100 = () => {
    const currentTotal = getTotalPercentage();
    const diff = currentTotal - 100;
    if (diff === 0) return;

    // 计算需要调整的次数
    const adjustCount = Math.abs(Math.round(diff * 100));
    // 按百分比降序排序，确保调整数值最大的记录
    const sortedList = [...distributors].sort((a, b) => b.percentage - a.percentage);

    // 执行调整逻辑
    const adjustedList = sortedList.map((item, index) => {
      if (index < adjustCount) {
        const newPercentage = diff > 0 
          ? parseFloat((item.percentage - 0.01).toFixed(2)) 
          : parseFloat((item.percentage + 0.01).toFixed(2));
        // 同步更新Total值
        const newTotal = parseFloat((totalAmount * newPercentage / 100).toFixed(1));
        return { ...item, percentage: newPercentage, total: newTotal };
      }
      return item;
    });

    // 恢复原数据的展示顺序
    const finalList = distributors.map(original => 
      adjustedList.find(adj => adj.id === original.id)
    );

    setDistributors(finalList);
  };

  const currentTotal = getTotalPercentage();

  return (
    <div className="App">
      <h1>分销商百分比分配</h1>
      <button 
        onClick={adjustTo100}
        disabled={currentTotal === 100}
      >
        达成100%
      </button>
      <p>当前总和：{currentTotal}%</p>
      <table>
        <thead>
          <tr>
            <th>分销商名称</th>
            <th>Distribution Percentage (%)</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          {distributors.map(item => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.percentage}</td>
              <td>{item.total}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

关键细节 #

1. 浮点精度处理：每次调整后用toFixed(2)固定百分比的小数位，避免浮点运算误差
2. 顺序保留：调整时先排序，调整后再恢复原数据的展示顺序，保证用户体验一致
3. 按钮状态控制：当总和已经是100%时，按钮自动禁用，避免无效操作

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