Question

我正在用 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'。包括它或删除它依赖数组

Answer 1

我建议阅读更多关于 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]);

欲了解更多信息： https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

简短版本：linter 告诉您某些状态取决于可以更改（带有历史记录）的外部变量，但是您将其从 useEffect() 的依赖项数组中排除。例如;当依赖数组为空时，效果只会运行一次（每个组件安装/'页面[重新]加载'）。（如有不对请指正）

Answer 2

您需要在 history 依赖项数组中包含 useEffect。现在 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]);

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

2 个答案: