React Hook useEffect 缺少依赖项：xxx。包括它们或删除依赖项数组 react-hooks/exhaustive-deps

Question

我正在通过 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
    );
}

但是反应给出了警告

React Hook useEffect has missing dependencies: 'status' and 'token'. Either include them or remove the dependency array react-hooks/exhaustive-deps

同时将 status 添加到依赖项数组将导致无限循环，因为 setStatus 是在 useEffect

内部调用的

Answer 1

如果您希望效果运行仅在组件安装时出现一次，那么从技术上讲，指定一个空的依赖项数组是正确的。但是，React-hooks linting 规则无法区分这种情况。您可以专门针对该行禁用规则。

我还注意到你的效果并不真正依赖于 status.auth 因为你总是 mutating/overwriting 它无论如何，你可以删除它并设置新的 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 作为依赖项包含在内。如果组件 rerenders/remounts 和令牌已更改，您需要确保使用的是最新值。换句话说，您不想使用过时的 state/prop 值。

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 解析为 false，则不会呈现循环，还包括您尚未完成加载的条件。

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]);

React Hook useEffect 缺少依赖项：xxx。包括它们或删除依赖项数组 react-hooks/exhaustive-deps

React Hook useEffect has missing dependencies: xxx. Either include them or remove the dependency array react-hooks/exhaustive-deps

infinite-loop

reactjs

use-effect