React阶梯定价距离运费计算器计算逻辑与useState更新问题求助

1. 核心问题拆解 #

• 计算逻辑错误：原有代码将全程运费匹配单一单价，未按跨区间分段累加计算，且条件判断仅能覆盖行驶区间完全落在某一阶梯内的场景，跨区间场景必然出现单价偏高/偏低的错误
• useState异步更新问题：React的setState方法是异步批量执行的，调用setN后当前作用域内的n仍是更新前的旧值，所以第一次点击计算时setTotal用了旧的n值，第二次点击才能拿到上一次更新的n，因此需要点击两次才生效

2. 修复后的完整代码 #

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

// 阶梯定价配置：[区间起点, 区间终点, 每公里单价]，可按需调整
const PRICE_TIERS = [
  [0, 15, 1],
  [15, 20, 2],
  [20, 25, 3],
  [25, 30, 4],
  [30, 35, 5],
  [35, Infinity, 6]
];

function App() {
  const [x, setX] = useState(5);
  const [y, setY] = useState(10);
  const [total, setTotal] = useState(0);

  function calculateTotal() {
    // 参数合法性校验
    if (y <= x) {
      setTotal(0);
      return;
    }
    let sum = 0;
    // 遍历每个定价阶梯计算费用
    for (const [start, end, price] of PRICE_TIERS) {
      // 计算当前阶梯和行驶区间的重叠部分
      const overlapStart = Math.max(x, start);
      const overlapEnd = Math.min(y, end);
      if (overlapEnd > overlapStart) {
        sum += (overlapEnd - overlapStart) * price;
      }
    }
    setTotal(sum);
  }

  return (
    <div className="Calc">
      <div className="number-inputs">
        <input
          type="number"
          step="1"
          value={x}
          onChange={(e) => setX(+e.target.value)}
        />
        <input
          type="number"
          step="1"
          value={y}
          onChange={(e) => setY(+e.target.value)}
        />
      </div>

      <button onClick={calculateTotal}>Calc</button>

      <h2 id="currentDistance">{total}</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

3. 改动说明 #

• 移除了不必要的n状态，定价规则统一放到PRICE_TIERS配置中，后续调整单价、增减区间只需修改该配置即可，无需改动计算逻辑
• 重写了计算逻辑，自动匹配所有跨区间场景，输入x=10、y=25时计算结果为30，完全符合预期
• 计算总费用时直接用临时变量累加结果后一次性更新total，避开了useState异步更新的问题，点击一次即可拿到正确结果

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