React注册表单密码匹配校验响应滞后一个字符问题求解

React 中 useState 触发的状态更新是异步批量执行的，你在 onChange 回调中先后调用 changeValue 和 input 时，changeValue 触发的 info 状态更新还未落地，input 函数读取的 info 永远是本次事件触发前的旧值，因此校验逻辑永远滞后一轮输入，就会出现你遇到的现象。

直接用 useEffect 监听密码、确认密码的内容变化，自动触发校验逻辑，不需要在 onChange 里手动调用校验函数，从根源上避开状态更新异步的问题：

修改后的完整代码如下：

import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import "./register.css";

function RegisterBoard() {
  const history = useHistory();
  const [register, changeRegister] = useState({
    password: false,
    repeatPassword: false,
  });
  const [info, changeInfo] = useState({
    password: "",
    repeatPassword: "",
  });

  // 监听两个密码输入值的变化，自动更新校验状态
  useEffect(() => {
    // 密码非空就标记password状态为true，可根据你的校验规则调整
    changeRegister(prev => ({
      ...prev,
      password: info.password.length > 0,
      repeatPassword: info.password === info.repeatPassword
    }))
  }, [info.password, info.repeatPassword])

  const changeValue = (e) => {
    const { name, value } = e.target;
    changeInfo((prev) => {
      return {
        ...prev,
        [name]: value,
      };
    });
  };

  return (
    <div className="registration-form">
      <form>
        <div>
          <input
            name="password"
            data-name="password"
            onChange={changeValue}
            className="password"
            type="password"
            placeholder="ENTER YOUR PASSWORD HERE"
          />
          <div className="animated-button">
          </div>
        </div>
        <div>
         <input
            id="pwd"
            name="repeatPassword"
            data-name="repeatPassword"
            onChange={changeValue}
            className="repeat-password"
            type="password"
            placeholder="REPEAT YOUR PASSWORD HERE"
          />
         </div>
      </form>
    </div>
  );
}
export default RegisterBoard;

如果你不想用 useEffect，也可以在触发校验时直接取事件对象的最新值、或者在 changeValue 的函数式更新回调里同步执行校验逻辑，确保拿到的是最新的输入值。

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