如何用React+TypeScript简化含大量If语句的价格计算函数？

核心思路是通过特征-价格映射表统一管理各特征费用，结合对象遍历替代重复的条件判断，同时修正原逻辑中的状态更新问题，让代码更简洁易维护。

步骤1：提取常量，统一配置 #

把重复的初始状态和特征价格抽成常量，避免冗余定义，后续修改只需调整一处：

// 初始特征状态常量
const INITIAL_CUSTOMIZATION: HairFeatures = {
  hairstyle: '0',
  haircolor: '0',
  secondaryhaircolor: '0',
  hairtatoo: '0',
  facialhair: '0',
  facialhaircolor: '0',
  eyebrows: '0',
  eyebrowscolor: '0',
};

// 特征-价格映射表，集中管理各特征的费用
const FEATURE_PRICES: Record<keyof HairFeatures, number> = {
  hairstyle: 50,
  hairtatoo: 20,
  haircolor: 120,
  secondaryhaircolor: 80,
  facialhair: 75,
  facialhaircolor: 100,
  eyebrows: 50,
  eyebrowscolor: 50,
};

步骤2：用Reduce遍历替代If语句 #

借助Object.entries和reduce方法遍历价格配置，对比当前与历史特征值，自动累加差异项的费用，彻底消除大量if判断：

const [previousCustomization, setPreviousCustomization] = useState<HairFeatures>(INITIAL_CUSTOMIZATION);
const [customization, setCustomization] = useState<HairFeatures>(INITIAL_CUSTOMIZATION);
const [price, setPrice] = useState(0);

// 优化后的价格计算函数，无冗余If语句
const calculatePrice = (currentFeatures: HairFeatures, previousFeatures: HairFeatures) => {
  const totalCost = Object.entries(FEATURE_PRICES).reduce((sum, [feature, cost]) => {
    const featureKey = feature as keyof HairFeatures;
    return currentFeatures[featureKey] !== previousFeatures[featureKey] ? sum + cost : sum;
  }, 0);
  
  setPrice(totalCost);
};

步骤3：修正状态更新逻辑 #

确保每次计算后更新历史特征状态，同时处理React状态更新的异步特性：

const handleBuyButtonClick = () => {
  calculatePrice(customization, previousCustomization);
  // 更新历史特征状态，让下次对比基于上一次的选择
  setPreviousCustomization(customization);
  
  // 注意：setPrice是异步操作，直接console.log拿不到最新值，建议用useEffect监听
};

// 可选：监听价格变化，打印最新值
useEffect(() => {
  console.log('当前总价格:', price);
}, [price]);

进阶逻辑：支持改回特征扣除费用 #

如果需要基于上一次价格动态调整（而非每次重新计算与初始状态的差异），比如改回历史特征时扣除对应费用，可以调整为增量更新逻辑：

const calculatePrice = (currentFeatures: HairFeatures, previousFeatures: HairFeatures) => {
  setPrice(prevPrice => {
    let newPrice = prevPrice;
    
    for (const [feature, cost] of Object.entries(FEATURE_PRICES) as [keyof HairFeatures, number][]) {
      const currentVal = currentFeatures[feature];
      const prevVal = previousFeatures[feature];
      
      if (currentVal !== prevVal) {
        // 改回初始状态：扣除费用
        if (currentVal === INITIAL_CUSTOMIZATION[feature]) {
          newPrice -= cost;
        } 
        // 从初始状态改为自定义：添加费用
        else if (prevVal === INITIAL_CUSTOMIZATION[feature]) {
          newPrice += cost;
        }
        // 从一个自定义特征改为另一个：先扣原费用再加新费用（按需调整）
        else {
          newPrice = newPrice - cost + cost; // 若不同特征费用不同，需单独配置原费用
        }
      }
    }
    
    // 确保价格不会为负数
    return Math.max(newPrice, 0);
  });
};

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