React单选按钮与状态异常：切换时点数计算不更新

我知道已有不少类似问题被提问和解答，但我的React组件中的单选按钮表现不符合预期。当用户点击单选按钮时，应从总点数中扣除相应数值；若切换其他单选按钮，需返还之前扣除的点数，再扣除新选项的点数。但我无法实现切换后总点数的状态更新，已排查两天且无报错信息。

组件代码 #

const availableClasses = {
  peasant: {
    name: "Peasant",
    cost: 0,
  },
  noble: {
    name: "Noble",
    cost: 12,
  },
  warrior: {
    name: "Warrior",
    cost: 8,
  },
  wizard: {
    name: "Wizard",
    cost: 9,
  },
  trader: {
    name: "Trader",
    cost: 10,
  }
};

// ...

{Object.entries(availableClasses).map(([key, value]) => (
  <div key={key} className="form-control">
    <label className="label cursor-pointer">
      <span className="label-text">{value.name} - {value.cost}p</span>
      <input
        type="radio"
        name="charClass"
        value={key}
        className="radio checked:background-green-500"
        checked={key === charClass}
        onChange={handleClassChange}
      />
    </label>
  </div>
))}

处理函数代码 #

const handleClassChange = (e: any) => {
  const cls = e.target.value;
  
  if(cls != charClass){
    const refund = freePoints + lastUsed;
    setLast(0);
    setFreePoints(refund);
    
    const cost = availableClasses[cls].cost;
    setLast(cost);
    
    const query = (freePoints - cost) < 0;
    const error = "You do not have enough free points!";
    const cause = freePoints - cost;
    
    if (query) {
      toast.error(error, {
        position: toast.POSITION.BOTTOM_RIGHT,
        draggable: false,
      });
    } else {
      setCharClass(cls);
      setFreePoints(cause);
    }
  }
};

问题分析与修复 #

你的问题出在React状态更新的异步性以及逻辑顺序错误上，具体问题和修复方案如下：

核心问题 #

1. 异步状态更新导致数值错误：React的setState是异步操作，你在调用setFreePoints(refund)后立刻使用freePoints计算新的扣除值，此时freePoints还是更新前的旧值，无法拿到返还后的正确数值。
2. 无效的状态更新合并：你先调用setLast(0)又立刻setLast(cost)，这两次更新会被React合并，最终lastUsed直接被设置为cost，丢失了先返还再扣除的逻辑步骤。
3. 逻辑顺序混乱：没有先完成返还计算就直接扣除新费用，导致数值计算基于旧状态，结果错误。

修复后的处理函数 #

const handleClassChange = (e) => {
  const cls = e.target.value;
  
  if (cls !== charClass) {
    // 先计算返还上次扣除后的总点数
    const afterRefund = freePoints + lastUsed;
    const newCost = availableClasses[cls].cost;
    const newFreePoints = afterRefund - newCost;

    if (newFreePoints < 0) {
      toast.error("You do not have enough free points!", {
        position: toast.POSITION.BOTTOM_RIGHT,
        draggable: false,
      });
    } else {
      // 一次性更新所有状态，避免异步更新的时序问题
      setCharClass(cls);
      setFreePoints(newFreePoints);
      setLast(newCost);
    }
  }
};

额外检查点 #

• 确保状态初始化正确：charClass应初始化为默认类（如'peasant'），lastUsed初始化为对应默认类的cost（如0），freePoints初始化为预设的总点数，初始值错误会直接导致逻辑异常。

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