如何修复 React Hook useEffect 缺少依赖项：答案

【问题标题】：How do you fix React Hook useEffect has a missing dependency:如何修复 React Hook useEffect 缺少依赖项：
【发布时间】：2021-06-21 03:03:12
【问题描述】：

我正在使用 React 构建一个网站，但我不知道如何解决这个问题。

useEffect(() => {
    const generateToken = async () => {
      try {
        const token = await commerce.checkout.generateToken(cart.id, { type: 'cart' });

        setCheckoutToken(token);
      } catch (error) {
        history.pushState('/');
      }
    }

    generateToken();
  }, [cart]);

React Hook useEffect 缺少一个依赖项：'history'。包括它或删除依赖数组

【问题讨论】：

window.history?
请提供MCRE。
什么是历史？看起来您没有使用没有 pushState 方法的 react-router 历史记录而不是 push。
使用 eslint-plugin-react-hooks。它会自动加载依赖项。

标签： reactjs react-hooks

【解决方案1】：

您需要在useEffect 依赖数组中包含history。现在useEffect 回调函数将在每次依赖数组中的任何项目更改时运行。现在history 或window.history 是浏览器提供的API，因此不会改变，所以你可以将它包含在你的依赖数组中。

useEffect(() => {
    const generateToken = async () => {
      try {
        const token = await commerce.checkout.generateToken(cart.id, { type: 'cart' });

        setCheckoutToken(token);
      } catch (error) {
        history.pushState('/');
      }
    }

    generateToken();
  }, [cart, history]);

【讨论】：

【解决方案2】：

我建议阅读更多关于 useEffect() 及其依赖数组如何工作的信息。但如果你想摆脱那个小警告：

    const generateToken = async () => {
      try {
        const token = await commerce.checkout.generateToken(cart.id, { type: 'cart' });

        setCheckoutToken(token);
      } catch (error) {
        history.pushState('/');
      }
    }

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

短版：linter 告诉您某些状态取决于可以更改的外部变量（带有历史记录），但是您将其从 useEffect() 的依赖项数组中排除在外。例如;当依赖数组为空时，效果将只运行一次（每个组件挂载/'page [re]load'）。（如有错误请指正）

【讨论】：