Question

我在控制台中收到消息：

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

Answer 1

关于警告消息：

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

first 是当前方案，当您需要在代码中的其他位置使用calculateTotalProductsPrice函数，然后需要在{{1 }}。如果是这种情况，则将其添加到所谓的依赖项数组中，如下所示：

useEffect

在这种情况下，警告消息将不会再次显示，同时也可以在JSX中访问，就像function calculateTotalProductsPrice() { // ... your calculation code } useEffect(() => { calculateTotalProductsPrice() }, [calculateTotalProductsPrice])一样。

第二是在您不需要<span>€ {calculateTotalProductsPrice()}</span>之外的calculateTotalProductsPrice函数之后，就可以像在此一样在回调内部创建在第二个示例中。

关于该功能的可访问性：

并且一旦在useEffect中声明，就无法在外部访问函数calculateTotalProductsPrice的原因是JavaScript范围。由于关闭，只能从文档中访问useEffect钩子内部的函数：

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

在此处进一步阅读：

我希望这会有所帮助！

ReactJS-警告消息“ Hook useEffect缺少依赖项”

1 个答案: