React密码输入onChange校验时始终读取前一次state值如何解决

• React的状态更新是异步批量执行的，你在onChange回调中调用setUserSignup之后，userSignup的状态不会立刻更新，此时调用checkPassword读取到的还是更新前的旧密码值，所以会出现慢一步的情况。
• 你之前在checkPassword内部调用useEffect违反了React Hook的使用规则：Hook只能在React组件的顶层、或者自定义Hook的顶层调用，不能在普通函数、事件回调内部调用，仅修改函数名大写不会解决这个问题。

你不需要依赖已更新的state来做校验，onChange回调中已经能拿到最新输入的密码值，直接把这个值传给checkPassword即可：

const checkPassword = (newPassword) => {
  // 这里用函数式更新state，避免依赖passwordFlag的旧值
  setPasswordFlag(prev => ({
    ...prev,
    length: newPassword.length >= 10
  }));
};

对应输入框修改后的代码：

<input 
  type="password" 
  className="input_container" 
  placeholder="Mot de passe" 
  id="password" 
  name="password" 
  onChange={(e) => {
    const newPwd = e.target.value;
    setUserSignup({
      ...userSignup,
      user_password: newPwd,
    });
    // 直接传入最新的密码值校验
    checkPassword(newPwd);
  }}
  value={userSignup.user_password} 
  ref={refSignupPassword} 
/>

如果你不想在事件回调里传参，可以把校验逻辑提到组件顶层，用useEffect监听userSignup.user_password的变化，自动触发校验：

// 直接写在组件顶层，不需要嵌套在checkPassword函数内
useEffect(() => {
  setPasswordFlag(prev => ({
    ...prev,
    length: userSignup.user_password.length >= 10
  }));
// 依赖项填密码状态，密码变化时自动执行校验
}, [userSignup.user_password]);

// onChange可以简化，不需要手动调用校验函数
<input 
  type="password" 
  className="input_container" 
  placeholder="Mot de passe" 
  id="password" 
  name="password" 
  onChange={(e) => {
    setUserSignup({
      ...userSignup,
      user_password: e.target.value,
    });
  }}
  value={userSignup.user_password} 
  ref={refSignupPassword} 
/>

两种方案都可以满足onChange实时校验的需求，可根据你的代码习惯选择。

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