React重复密码验证异常：匹配时未生效，输入第五位才触发正确状态

这个问题的核心在于React的setState是异步操作。你在handleChange方法里先调用this.setState更新状态，紧接着就调用checkPassword，但此时React还没完成state的更新，checkPassword读取到的仍然是更新前的旧state值。

举个具体的例子：
当你把重复密码输入到第四个字符"1234"时，handleChange里的setState({password_re: "1234"})还没生效，checkPassword中读取的this.state.password_re还是前一次的"123"，和password的"1234"对比不相等，所以password_has_error依然是true。
直到你输入第五个字符时，这次的setState会把password_re更新为"1234x"，而checkPassword此时读取的是上一次更新后的"1234"，这时候和password的"1234"匹配，才会把password_has_error设为false。

下面提供两种可行的修复方式：

方案一：利用setState的回调函数 #

setState支持第二个参数（回调函数），它会在state更新完成后执行，这样就能确保checkPassword读取到的是最新的state值：

handleChange(event) {
  const { name, value } = event.target;
  this.setState(
    { [name]: value },
    () => {
      // 仅在密码或重复密码输入时触发验证
      if (name === 'password' || name === 'password_re') {
        this.checkPassword();
      }
    }
  );
}

方案二：直接使用输入框的当前值验证 #

不依赖state，直接用事件对象中的value来做对比，跳过state异步更新的问题：

首先修改checkPassword方法，让它接收两个参数：

checkPassword(password, password_re) {
  if (!password || password !== password_re) {
    this.setState({ password_has_error: true });
  } else {
    this.setState({ password_has_error: false });
  }
}

然后更新handleChange，传入当前的输入值：

handleChange(event) {
  const { name, value } = event.target;
  this.setState({ [name]: value });
  
  if (name === 'password' || name === 'password_re') {
    // 获取当前两个密码输入框的最新值
    const currentPassword = name === 'password' ? value : this.state.password;
    const currentPasswordRe = name === 'password_re' ? value : this.state.password_re;
    this.checkPassword(currentPassword, currentPasswordRe);
  }
}

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