React使用useReducer后OnBlur触发时报action.val未定义错误如何解决

开发者阿泽

2026-10-6

错误根因

密码 reducer 的条件判断逻辑存在语法错误：你在 passReducer 中用了赋值运算符 = 代替了全等比较运算符 ===。
代码里的 if ((action.type = "PASS_INPUT")) 实际是直接给 action.type 强制赋值为 "PASS_INPUT"，赋值表达式返回值恒为真，所以无论你触发的是输入事件还是失焦事件，都会进入这个分支。
失焦触发的 PASS_BLUR 动作没有携带 val 参数，进入该分支后访问 action.val.trim 自然会抛出 undefined 报错。
邮箱逻辑没有问题是因为 emailReducer 里的条件判断用的是正确的 === 严格比较，只有对应类型的动作才会进入对应分支，失焦动作不会触发需要 val 参数的输入逻辑。

修复方案

将 passReducer 的条件判断运算符修正为 ===，同时补全失焦时的校验逻辑即可：

const passReducer = (state, action) => {
  // 替换=为===
  if (action.type === "PASS_INPUT") {
    return {
      ...state,
      value: action.val,
      isValid: action.val.trim().length > 6, 
    };
  }
  // 替换=为===，同时补全失焦校验逻辑，和邮箱逻辑对齐
  if (action.type === "PASS_BLUR") {
    return {
      ...state,
      isValid: state.value.trim().length > 6
    };
  }
  return { value: "", isValid: false };
};