useState set方法无法更新ContextApi中状态值的问题排查

你的代码存在以下几个直接导致状态更新异常的问题：

• 同一次onChange回调中对同一个state重复调用setState：比如cardnumber先被设为纯数字，后面又被设为格式化字符串，React会合并更新，最终只有最后一次生效；且更新errors时直接读取闭包中的旧errors值，很容易拿到过期状态
• 变量引用错误：卡类型判断逻辑里，你刚计算完cardTypeSelected，转头判断时用的是cardType变量，要么是未定义、要么是上一次渲染的旧卡类型值，判断逻辑完全失效
• 全局状态完全没做正确同步：你现在把表单值存在组件本地的useState里，全程没调用context里的actionsCollection更新全局状态；注释里直接写state.creditCard.cardholder = e.target.value是直接修改状态引用，不会触发组件重渲染，违反React状态更新规则
• 校验逻辑写反：非运通卡的分支里，不管卡号长度够不够，都直接把cardnumber的错误状态设为true
• 多余的事件拦截：输入框onChange回调里调用e.preventDefault()会干扰输入框默认行为，反而导致输入异常

不要重复维护两套状态（本地useState存一份、全局context存一份），既然需要全局可用，直接把信用卡表单值存在全局context中，组件本地只维护校验错误状态即可，避免两边同步出错。

1. 先确认你的StateContext中提供了更新creditCard的action方法，要求是不可变更新，不能直接修改原state对象
2. 修正卡类型判断逻辑，直接用当前回调里计算出的cardTypeSelected做判断，不要等异步setState完成再读值
3. 所有状态更新如果依赖旧值，统一用函数式更新写法，避免闭包拿到过期状态
4. 表单输入框的value直接绑定全局状态中的creditCard字段，每次输入同步调用全局action更新全局状态

组件逻辑部分 #

const { state, actionsCollection } = useContext(StateContext);
// 直接从全局状态取信用卡表单值，不再本地重复useState维护
const { creditCard } = state;
// 仅本地维护校验错误状态
const [errors, setErrors] = useState({
  cardholder: false,
  cardnumber: false,
  cardmonth: false,
});
const [cardType, setCardType] = useState("");

const onChange = (e) => {
  const { name, value } = e.target;
  switch (name) {
    case "cardnumber": {
      const pureNumber = value.replace(/\D/g, "");
      let cardTypeSelected = "";
      const regexPattern = {
        MASTERCARD: /^5[1-5][0-9]{1,}|^2[2-7][0-9]{1,}$/,
        VISA: /^4[0-9]{2,}$/,
        AMERICAN_EXPRESS: /^3[47][0-9]{5,}$/,
        DISCOVER: /^6(?:011|5[0-9]{2})[0-9]{3,}$/,
        DINERS_CLUB: /^3(?:0[0-5]|[68][0-9])[0-9]{4,}$/,
        JCB: /^(?:2131|1800|35[0-9]{3})[0-9]{3,}$/,
      };
      for (const card in regexPattern) {
        if (pureNumber.match(regexPattern[card])) {
          cardTypeSelected = card;
          break;
        }
      }
      setCardType(cardTypeSelected);

      let formattedNum = "";
      let isInvalid = true;
      if (cardTypeSelected === "AMERICAN_EXPRESS") {
        formattedNum = `${pureNumber.slice(0,4)} ${pureNumber.slice(4,10)} ${pureNumber.slice(10,15)}`.trim();
        // 运通卡合法长度15位，加2个空格格式化后总长度17
        isInvalid = formattedNum.length < 17;
      } else {
        formattedNum = `${pureNumber.slice(0,4)} ${pureNumber.slice(4,8)} ${pureNumber.slice(8,12)} ${pureNumber.slice(12,16)}`.trim();
        // 其余普通卡合法长度16位，加3个空格格式化后总长度19
        isInvalid = formattedNum.length < 19;
      }
      // 函数式更新errors，避免闭包旧值问题
      setErrors(prev => ({...prev, cardnumber: isInvalid}));
      // 调用全局action同步更新全局状态
      actionsCollection.updateCreditCard({
        ...creditCard,
        cardnumber: formattedNum
      });
      break;
    }
    case "cardholder": {
      const isValid = /^[a-zA-Z\u00C0-\u00FF\s*$]{1,50}$/.test(value);
      setErrors(prev => ({...prev, cardholder: !isValid}));
      actionsCollection.updateCreditCard({
        ...creditCard,
        cardholder: value
      });
      break;
    }
    case "cardmonth": {
      const monthVal = value.replace(/\D/g, "").slice(0,2);
      // 校验月份范围1-12
      const isInvalid = monthVal !== "" && (Number(monthVal) < 1 || Number(monthVal) > 12);
      setErrors(prev => ({...prev, cardmonth: isInvalid}));
      actionsCollection.updateCreditCard({
        ...creditCard,
        cardmonth: monthVal
      });
      break;
    }
    default:
      break;
  }
};

表单渲染部分 #

<TextField
  name="cardholder"
  label="Card holder"
  error={errors.cardholder}
  value={creditCard.cardholder}
  onChange={onChange}
  helperText={errors.cardholder && "Invalid card holder"}
  className={classes.cardHolderNumberInputs}
/>
<TextField
  name="cardnumber"
  label="Card number"
  error={errors.cardnumber}
  value={creditCard.cardnumber}
  onChange={onChange}
  helperText={errors.cardnumber && "Invalid card number"}
  className={classes.cardHolderNumberInputs}
/>
<TextField
  name="cardmonth"
  label="MM"
  error={errors.cardmonth}
  value={creditCard.cardmonth}
  onChange={onChange}
  onBlur={validateInput}
  helperText={errors.cardmonth && "Invalid month"}
  className={classes.expiryDateInputs}
/>

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