时间戳

首页 > 解决方案 > React ：总是考虑之前的状态 id，即使使用 prevState 和 useEffect

reactjs - React ：总是考虑之前的状态 id，即使使用 prevState 和 useEffect

问题描述

我有一个检查密码长度的 checkPassword 函数，该函数在输入我的密码时触发“onChange”。

这是功能：

 const checkPassword = () => {
    if (user_password.length >= 10)
      setPasswordFlag({ ...passwordFlag, length: true });
    else setPasswordFlag({ ...passwordFlag, length: false });
   };

这是我的密码输入：

<input type="password" className="input_container" placeholder="Mot de passe" id="password" name="password" onChange={(e) => {
   setUserSignup({
     ...userSignup,
     user_password: e.target.value,
   });
   checkPassword();
 }}
value={userSignup.user_password} ref={refSignupPassword} />

问题是每次都考虑到之前的状态。基本上我的状态 passwordFlag.length 在第 11 个字符而不是第 10 个字符处更改为 true。

我尝试使用 prevState，但它并没有改变任何东西。

然后，我尝试像这样使用 useEffect ：

const checkPassword = () => {
      useEffect(() => {
        if (user_password.length >= 10)
          setPasswordFlag({ ...passwordFlag, length: true });
        else setPasswordFlag({ ...passwordFlag, length: false });
      }, []);
    };

但是我现在有这个错误：在函数“checkPassword”中调用了 React Hook “useEffect”，该函数既不是 React 函数组件也不是自定义 React Hook 函数。React 组件名称必须以大写字母开头。我试图用大写重命名我的函数，但同样的问题。

但是，如果我将 checkPassword 函数放在 onBlur={checkPassword} 中，那么它可以工作。但我需要在“onChange”而不是“onBlur”中修复它

有人能告诉我我需要做什么来确保考虑到正确的状态吗？

谢谢 ！

标签： reactjs

解决方案

您不能在函数块内使用“useEffect”。

您可以像这样更改您的功能：

 const checkPassword = (password) => {
    if (password.length >= 10)
      setPasswordFlag({ ...passwordFlag, length: true });
    else setPasswordFlag({ ...passwordFlag, length: false });
   };

和你的密码输入：

<input type="password" className="input_container" placeholder="Mot de passe" id="password" name="password" onChange={(e) => {
   setUserSignup({
     ...userSignup,
     user_password: e.target.value,
   });
   checkPassword(e.target.value);
 }}
value={userSignup.user_password} ref={refSignupPassword} />

我们将值传递给 checkPassword 函数。现在您的函数可以立即访问密码长度。

推荐阅读