React Redux 表单校验首次点击不生效 二次点击才更新状态

问题本质是异步时序不匹配：

• Redux的dispatch是排队触发状态更新、组件重渲染的异步动作，执行完dispatch后，不会立刻把新状态同步到当前正在执行的函数作用域里
• 你在AddTransaction函数里的执行顺序是：先抛出校验相关的dispatch动作 → 立刻读取当前闭包里缓存的旧state做拦截判断
• 这里读到的state.title.isCorrectValue、state.amount.isCorrectValue还是上一次渲染周期留下的旧值，根本拿不到刚dispatch触发更新后的校验结果
• 第一次点击时，旧值里的校验标记都是初始的false，所以拦截判断直接失效，代码会直接走到提交逻辑
• 等第二次点击时，上一次dispatch触发的状态更新已经走完重渲染流程，state里的校验标记才被更新成正确值，拦截逻辑才会生效

你当前实现的提交逻辑存在「同步读取异步状态」的典型问题：

const AddTransaction = () => {
  // 仅将校验动作抛入Redux队列，不会立刻更新当前函数能读到的state
  dispatch(fieldsValidation(state.title.value, state.amount.value));
  // 这里读取的是组件当前渲染时绑定的旧state快照，完全没有上一步dispatch带来的更新结果
  if (state.title.isCorrectValue || state.amount.isCorrectValue) {
    return false;
  }
  dispatch(addExpense(state.title.value, state.amount.value))
};

不需要改动整体的Redux状态流，只要把校验逻辑的执行顺序调整为「先本地同步校验拦截，再dispatch更新UI提示」，就能让首次点击就正常工作：

1. 在提交处理函数里，直接基于当前拿到的输入值，同步调用校验方法判断字段是否非法
2. 先基于计算出的同步结果做拦截判断，这一步没有异步等待，首次点击就能拿到正确结果
3. 如果校验不通过，再把校验结果dispatch给Redux，更新输入框的error提示状态

调整后的代码：

const AddTransaction = () => {
  // 1. 同步计算两个字段的校验结果，不等待Redux状态更新
  const isTitleInvalid = checkValue(state.title.value);
  const isAmountInvalid = checkValue(state.amount.value);

  // 2. 同步做拦截判断，首次点击即可生效
  if (isTitleInvalid || isAmountInvalid) {
    // 3.  dispatch校验结果到Redux，更新输入框的错误提示UI
    dispatch(fieldsValidation(state.title.value, state.amount.value));
    return false;
  }

  // 4. 校验通过再执行提交逻辑
  dispatch(addExpense(state.title.value, state.amount.value))
};

顺带提两个容易踩的小问题：

• 现在reducer里存的isCorrectValue语义是反的：值校验不通过的时候才给它赋true，和变量名“值正确”的字面意思完全相反，后面维护改逻辑很容易踩坑，建议直接把字段名改成hasError，让语义和实际逻辑对齐
• 别拿dispatch之后的异步Redux状态做同步判断，不然这种“点两次才生效”的问题排查成本特别高，同步校验的结果直接在当前函数里算完就行，需要同步给全局的UI提示状态再扔到Redux里更新。

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