React表单信用卡有效期拆分后首次提交不生效问题求解

问题根源 #

React的setFormData是异步更新接口，调用后不会立刻修改当前作用域下的formData变量，也不会立即触发组件状态更新，需要等下一次渲染周期才会生效。你在调用setFormData后立刻用原formData发起请求，实际传的还是拆分前的旧数据，只有第二次提交时状态已经更新完成，才能拿到拆分后的值。

解决方案 #

方案1：提交时直接处理数据（适合拆分字段仅提交时使用的场景） #

不需要依赖状态更新，直接构造处理完成的提交数据即可，改动最小：

const onSubmit = e => {
  e.preventDefault();
  // 先构造完整的处理后数据
  const submitData = {
    ...formData,
    cc_exp_month: cc_exp.split('/')[0],
    cc_exp_year: cc_exp.split('/')[1],
    username: email
  };
  // 如果不需要在表单里保留拆分后的值，甚至可以省略这行setFormData
  setFormData(submitData);
  // 直接用处理好的数据发起请求
  dispatch(createMembership(submitData, id));
}

方案2：输入时同步拆分（适合拆分字段需要用于校验、联动等其他场景） #

直接修改onChange逻辑，当用户输入有效期时同步拆分更新对应字段，保证三个字段始终同步：

const onChange = e => {
  const { name, value } = e.target;
  if (name === 'cc_exp') {
    const [month, year] = value.split('/') || [];
    setFormData({
      ...formData,
      cc_exp: value,
      cc_exp_month: month || '',
      cc_exp_year: year || ''
    });
    return;
  }
  // 其他字段走原有逻辑
  setFormData({ ...formData, [name]: value });
}

这种方式后续不管是做有效期格式校验，还是其他地方需要用到月份/年份字段，都能直接从formData里拿到最新值，不需要额外处理。

额外提示 #

你当前的useState初始值里cc_exp_month没有设置默认空字符串，建议补上避免出现undefined的异常情况：

const [ formData, setFormData ] = useState({
  email: '',
  password: '',
  username: '',
  card_num: '',
  cvv_code: '',
  cc_exp: '',
  cc_exp_year: '',
  cc_exp_month: '', // 补全初始值
  first_name: '',
  last_name: '',
})

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