时间戳

首页 > 解决方案 > React Hook useEffect 缺少与 Useeffect 挂钩的依赖项。忽略此警告是不好的做法吗？

reactjs - React Hook useEffect 缺少与 Useeffect 挂钩的依赖项。忽略此警告是不好的做法吗？

问题描述

我有一个使用效果来验证两个密码是否相等。我只想在 confirm_pw 状态更改时运行，而不是在密码状态更改时运行。

我已经完成了这个

useEffect(() => {
    if (password !== confirm_pw) {
      setPasswordMismatchErr(true);
    } else {
      setPasswordMismatchErr(false);
    }
  }, [confirm_pw])

这完全符合预期！但是，反应不断告诉我

React Hook useEffect has a missing dependency: 'password'. Either include it or remove the dependency array

我应该忽略这个警告吗？有什么方法可以更改代码并保持所需的结果？

密码和confirm_pw定义为：

const [password, setPassword] = useState("");
const [confirm_pw, setConfirmPW] = useState("");

并使用

<input
            className="box__input"
            name="password"
            value={password}
            onChange={handlePassword}
            type="password"
            required
          />
<input
            className="box__input"
            name="confirm_pw"
            value={confirm_pw}
            type="password"
            onChange={handleConfirmPassword}
            required
          />

Handleconfirmpassword 和 handlePassword 是 setstate 函数的简单包装器。

标签： reactjsuse-effect

解决方案

短绒是正确的。您当前的代码有一个错误：如果用户确定他们正确输入了确认密码，并且需要在第一次输入时重新输入密码怎么办？然后，在进行更改后，尽管两个密码框匹配，passwordMismatchErr仍将保留true.

添加password到依赖数组：

}, [password, confirm_pw])

然后，对于passwordMismatchErr，为了在用户最初输入时不显示它，请先检查是否confirm_pw为空。例如：

{
  passwordMismatchErr && confirm_pw ? <div>Error...</div> : null
}

您还可以useEffect使用以下方法简化回调：

setPasswordMismatchErr(password !== confirm_pw);

推荐阅读