时间戳

首页 > 解决方案 > ReactJS - 警告消息'Hook useEffect 缺少依赖项'

javascript - ReactJS - 警告消息'Hook useEffect 缺少依赖项'

问题描述

我在控制台中收到消息：

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

代码正在运行，但我不知道这是否是实现 useEffect 的正确方法

在这里，我有一个计算产品总价的函数，并在我的 useEffect 挂钩中调用它：

  // Get all products the user added from my redux store
  const allProductsAddedByUser = useSelector(state => state.createCampaign.campaign_products)

  function calculateTotalProductsPrice() {
    const productsArray = Object.values(allProductsAddedByUser)
    const totalPrice = productsArray.reduce(function (prev, cur) {
      return prev + cur.quantity * 125.0
    }, 0)
    return totalPrice
  }

  useEffect(() => {
    calculateTotalProductsPrice()
  }, [allProductsAddedByUser])

在我的 html 中，我正在调用这样的函数：

<span>€ {calculateTotalProductsPrice()}</span>

如果我将calculateTotalProductsPrice()函数放在我的 useEffect 钩子中，来自控制台的警告就消失了，但是我不能像以前那样调用我的函数，我得到了错误'calculateTotalProductsPrice' is not defined。我的函数现在在 useEffect 钩子里面，为什么我不能从外面给她打电话？

  // Get all products the user added from my redux store
  const allProductsAddedByUser = useSelector(state => state.createCampaign.campaign_products)

  useEffect(() => {
    function calculateTotalProductsPrice() {
      const productsArray = Object.values(allProductsAddedByUser)
      const totalPrice = productsArray.reduce(function (prev, cur) {
        return prev + cur.quantity * 125.0
      }, 0)
      return totalPrice
    }
    calculateTotalProductsPrice()
  }, [allProductsAddedByUser])

 // Call function from my html
 <span>€ {calculateTotalProductsPrice()}</span> 
// Error calculateTotalProductsPrice is not defined

标签： javascriptreactjs

解决方案

关于警告信息：

在这种情况下有 2 种情况。

第一个是当前场景，当您calculateTotalProductsPrice在代码中的其他地方需要该函数时，您需要在useEffect. 如果将其传递给所谓的依赖数组，则添加一个，如下所示：

function calculateTotalProductsPrice() {
  // ... your calculation code
}

useEffect(() => {
  calculateTotalProductsPrice()
}, [calculateTotalProductsPrice])

在这种情况下，警告消息将不会再次显示，同时它也可以在 JSX 中访问，就像<span>€ {calculateTotalProductsPrice()}</span>.

其次，一旦您不需要calculateTotalProductsPrice外部的函数，useEffect您就可以像在第二个示例中那样在回调内部创建。

关于功能的可访问性：

calculateTotalProductsPrice声明后无法在外部访问该函数的原因useEffect是由于 JavaScript 作用域。由于关闭，该函数只能在useEffect钩子内部访问，来自文档：

闭包是捆绑在一起（封闭）的函数与对其周围状态（词法环境）的引用的组合。换句话说，闭包使您可以从内部函数访问外部函数的范围。在 JavaScript 中，每次创建函数时都会在创建函数时创建闭包。

在这里进一步阅读：

  1. JavaScript 范围
  2. 闭包

我希望这有帮助！

推荐阅读