useReducer钩子异常：密码验证状态无法正确更新

算力阿峰

2026-7-19

useReducer密码验证状态更新异常问题

我正在学习useReducer钩子，此前一直用useState跟踪输入字段状态和有效性，现在刻意改用useReducer以彻底掌握该钩子。

目前代码中除validatePasswordHandler外，所有处理器均正常工作：

当密码包含数字且长度≥6时，处理器和reducer中的console.log均显示验证逻辑计算为true，但state中的passwordIsValid始终保持false；
当密码仅含字母且长度不足6时，两处日志计算为false，状态也保持false。

我希望isFormValid能基于emailIsValid和passwordIsValid是否均为true来判断（暂未编写相关处理器，先忽略）。

原始代码

reducer及Login组件代码

const reducer = (state, action) => {
  switch (action.type) {
    case 'entered_email':
      return { ...state, enteredEmail: action.payload };
    case 'isEmailValid':
      return { ...state, emailIsValid: action.isEmailValid };
    case 'entered_password':
      return { ...state, enteredPassword: action.payload };
    case 'passwordIsValid':
      return { ...state, passwordIsValid: action.isPasswordValid };
    case 'formIsValid':
      return { ...state, formIsValid: action.isFormValid };
    default:
      throw new Error();
  }
};

const Login = (props) => {

  const [state, dispatch] = useReducer(reducer, {
    enteredEmail: '',
    emailIsValid: null,
    enteredPassword: '',
    passwordIsValid: null,
    formIsValid: null,
  });

  const emailChangeHandler = (event) => {
    dispatch({ type: 'entered_email', payload: event.target.value });
  };

  const passwordChangeHandler = (event) => {
    dispatch({ type: 'entered_password', payload: event.target.value });
  };

  const validateEmailHandler = () => {
    dispatch({
      type: 'isEmailValid',
      isEmailValid: state.enteredEmail.includes('@'),
    });
  };

  const validatePasswordHandler = () => {
    dispatch({
      type: 'passwordIsValid',
      isPasswordValid: state.enteredPassword.length >= 6,
    });
  };

  const submitHandler = (event) => {
    event.preventDefault();
    props.onLogin(state.enteredEmail, state.enteredPassword);
  };

  return (
    <Card className={classes.login}>
      <form onSubmit={submitHandler}>
        <div
          className={`${classes.control} ${
            state.emailIsValid === false ? classes.invalid : ''
          }`}>
          <label htmlFor='email'>E-Mail</label>
          <input
            type='email'
            id='email'
            value={state.enteredEmail}
            onChange={emailChangeHandler}
            onBlur={validateEmailHandler}
          />
        </div>
        <div
          className={`${classes.control} ${
            state.passwordIsValid === false ? classes.invalid : ''
          }`}>
          <label htmlFor='password'>Password</label>
          <input
            type='password'
            id='password'
            value={state.enteredPassword}
            onChange={passwordChangeHandler}
            onBlur={validatePasswordHandler}
          />
        </div>
        <div className={classes.actions}>
          <Button
            type='submit'
            className={classes.btn}
            disabled={state.formIsValid === true ? false : true}>
            Login
          </Button>
        </div>
      </form>
    </Card>
  );
};

处理器日志代码

const validatePasswordHandler = () => {
    console.log('from handler func func password:', state.enteredPassword);
    console.log(
      'from handler func password length:',
      state.enteredPassword.length
    );
    console.log(
      'from handler func typeof password:',
      typeof state.enteredPassword
    );
    console.log(
      'from handler func password greater than 6?:',
      state.enteredPassword.length > 6
    );
    dispatch({
      type: 'passwordIsValid',
      isPasswordValid: state.enteredPassword.length >= 6,
    });
  };

reducer日志代码

const reducer = (state, action) => {
  switch (action.type) {
    case 'entered_email':
      return { ...state, enteredEmail: action.payload };
    case 'isEmailValid':
      return { ...state, emailIsValid: action.isEmailValid };
    case 'entered_password':
      return { ...state, enteredPassword: action.payload };
    case 'passwordIsValid':
      console.log('from reducer func password:', state.enteredPassword);
      console.log(
        'from reducer func password length:',
        state.enteredPassword.length
      );
      console.log(
        'from reducer func typeof password:',
        typeof state.enteredPassword
      );
      console.log(
        'from reducer func password greater than 6?:',
        state.enteredPassword.length > 6
      );
      return { ...state, passwordIsValid: action.isPasswordValid };
    case 'formIsValid':
      return { ...state, formIsValid: action.isFormValid };
    default:
      throw new Error();
  }
};

问题原因及解决方案

核心原因

问题出在validatePasswordHandler中依赖组件渲染快照的state.enteredPassword计算有效性。React的状态更新是异步批量处理的，在某些场景下（如输入后立即触发onBlur），组件快照中的state.enteredPassword可能并非最新值，导致dispatch的验证结果不准确。

修复方案

将密码验证逻辑移至reducer内部，直接使用reducer接收的最新state计算有效性，避免依赖外部快照：

修改验证处理器：仅dispatch验证类型的action，不传递计算结果

const validatePasswordHandler = () => {
  dispatch({ type: 'validate_password' });
};

更新reducer：添加对应case，直接基于最新state计算密码有效性

const reducer = (state, action) => {
  switch (action.type) {
    // 保留原有case
    case 'entered_email':
      return { ...state, enteredEmail: action.payload };
    case 'isEmailValid':
      return { ...state, emailIsValid: action.isEmailValid };
    case 'entered_password':
      return { ...state, enteredPassword: action.payload };
    // 新增密码验证case
    case 'validate_password':
      return { 
        ...state, 
        passwordIsValid: state.enteredPassword.length >= 6 
      };
    case 'formIsValid':
      return { ...state, formIsValid: action.isFormValid };
    default:
      throw new Error();
  }
};

额外优化：实时计算表单有效性

无需单独维护formIsValid状态，可通过useMemo实时基于邮箱和密码的有效性计算：

import { useMemo } from 'react';

const Login = (props) => {
  // ... 原有代码

  const isFormValid = useMemo(() => {
    return state.emailIsValid === true && state.passwordIsValid === true;
  }, [state.emailIsValid, state.passwordIsValid]);

  // ... 修改提交按钮的disabled属性
  return (
    // ... 原有渲染代码
    <Button
      type='submit'
      className={classes.btn}
      disabled={!isFormValid}>
      Login
    </Button>
    // ... 原有渲染代码
  );
};

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