reactjs - useState值在reactjs中落后一步

Question

我正在 React 中的登录/注册页面上工作，我使用 useState Hook 来检查密码是否安全。并向用户显示他应该怎么做才能使他的密码更强大。但我注意到当用户在密码字段中输入时，他们在 useState 中更新密码时出现延迟(在函数 handlePassword 的 console.log() 中)。因此，我的函数 handlePassword 无法正常工作。

  const [err,setError]=useState("")
  const [password,setPassword]=useState("")

   function handlePassword(event){
      setPassword(event.target.value);
      if(password.length<6){
        console.log(password)
        setError("password should contain 6 character")
      }else if(!isInclude(password)){
         setError("password should contain a special character")
        
      }else{
        setError("")
      }
      

    }

   <input type="password" placeholder="password" required className="form-input" value={password} onChange={handlePassword} name="password"  onClick={clearInput}/>  

Answer 1

没有延迟，setState 异步工作，将您的 console.log 放在函数之外，您将看到正确的结果。所以出于同样的原因，您不能在设置状态后立即检查密码长度。相反，您需要像这样在 useEffect 中执行此操作；

    useEffect(()=>{
       if(password.length<6){
        console.log(password)
        setError("password should contain 6 character")
        }else if(!isInclude(password)){
         setError("password should contain a special character")
        }else{
        setError("")
        }
             }, [password])