Reaction Hook Use Effect缺少依赖项：xxx。可以包括它们，也可以删除依赖数组action-hooks/expletive-deps [英] React Hook useEffect has missing dependencies: xxx. Either include them or remove the dependency array react-hooks/exhaustive-deps

问题描述

我正在从useEffect钩子

进行API调用

function ChangePassword(props) {
    const token = props.match.params.token;

    const [state, setState] = useState({
        password: "",
        confirmPassword: "",
    });
    const [status, setStatus] = useState({
        loaded: false,
        auth: false,
    });

    useEffect(() => {
        let { auth } = status;

        axios
            .get(
                `http://localhost:2606/api/hostler/changepassword?token=${token}`
            )
            .then((res) => {
                console.log("res", res);
                auth = res.status === 202;
            })
            .then(() => setStatus({ auth, loaded: true }))
            .catch((err) => console.log("err", err));
    },[]);

    return (
        // code
    );
}

但反应发出警告

Reaction Hook useEffect缺少依赖项：‘Status’和‘Token’。可以包括它们，也可以删除依赖数组反应挂钩/穷举-deps

还将status添加到依赖数组将导致无限循环，因为setStatus是在useEffect内部调用的

推荐答案

如果希望组件挂载时效果只运行一次，则指定空的依赖项数组在技术上是正确的。然而，反应挂钩皮棉规则不能区分这种情况。您可以专门为该行禁用该规则。

我还注意到，您的效果实际上并不依赖于status.auth，因为无论如何您都会更改/覆盖它，因此您可以删除它，只需设置新的auth状态值。

useEffect(() => {
  axios
    .get(
      `http://localhost:2606/api/hostler/changepassword?token=${token}`
    )
    .then((res) => {
      console.log("res", res);
      setStatus({ auth: res.status === 202, loaded: true })
    })
    .then(() => )
    .catch((err) => console.log("err", err));

  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

但是，禁用该规则可能会屏蔽未来的更新，因此您需要将token作为依赖项包括在内。如果组件重新呈现/重新挂载，并且令牌已更改，则需要确保使用的是最新的值。换句话说，您不希望使用过时的状态/属性值。

useEffect(() => {
  axios
    .get(
      `http://localhost:2606/api/hostler/changepassword?token=${token}`
    )
    .then((res) => {
      console.log("res", res);
      setStatus({ auth: res.status === 202, loaded: true })
    })
    .then(() => )
    .catch((err) => console.log("err", err));

}, [token]);

如果您只想在auth为FALSE时运行GET请求，那么它将是一个依赖项，应该包括在内。因此，如果res.status === 202解析为假，则不会呈现循环，还会包括尚未完成加载的条件。

useEffect(() => {
  !auth && !loaded && axios
    .get(
      `http://localhost:2606/api/hostler/changepassword?token=${token}`
    )
    .then((res) => {
      console.log("res", res);
      setStatus({ auth: res.status === 202, loaded: true })
    })
    .then(() => )
    .catch((err) => console.log("err", err));

}, [auth, loaded, token]);

这篇关于Reaction Hook Use Effect缺少依赖项：xxx。可以包括它们，也可以删除依赖数组action-hooks/expletive-deps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！