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

【问题标题】：ReactJS - warning message 'Hook useEffect has a missing dependency'ReactJS - 警告消息'Hook useEffect 缺少依赖项'
【发布时间】：2020-01-01 18:34:38
【问题描述】：

我在控制台中收到消息：

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

关于警告信息：

这种情况有两种情况。

first 是当前场景，当您在代码中的其他位置需要 calculateTotalProductsPrice 函数时，您需要在 useEffect 之外创建。如果是这种情况，则添加一个将其传递给所谓的依赖数组，如下所示：

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

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

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

第二个是，一旦您不需要calculateTotalProductsPrice 函数之外的useEffect，那么您可以像在第二个示例中那样在回调内部创建.

关于功能的可访问性：

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

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

在此处进一步阅读：

我希望这会有所帮助！

【讨论】：