Javascript ReactJS-警告消息'；Hook useffect缺少依赖项'；

我在我的控制台中得到消息：

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>

---

关于警告消息：

  // 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])

在这种情况下有两种情况

第一个是当前场景，当您需要在代码中的其他地方使用

calculateTotalProductsPrice

函数时，您需要在

useEffect

之外创建。如果将其传递给所谓的依赖关系数组，则需要添加一个，如下所示：

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

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

在这种情况下，警告消息不会再次显示，同时也可以在JSX中访问，就像

€{calculateTotalProductsPrice（）}

Second是指在

useffect

之外不再需要

calculateTotalProductsPrice

函数，然后可以像在第二个示例中那样在回调内部创建

关于功能的可访问性：

  // 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])

而函数

calculateTotalProductsPrice

在

useffect

中声明后无法在外部访问的原因在于JavaScript范围。由于关闭，该函数只能在

useffect

hook内部访问，请参见文档：

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

请在此进一步阅读：

我希望这有帮助