我一直收到这个错误:最大更新深度超过了。这可能发生在组件调用内部的setState时。

Question

每当我运行我的代码时，我都会收到这样的错误：“超过了最大更新深度。当组件在useEffect中调用useEffect时，这种情况可能发生，但是useEffect要么没有依赖项数组，要么每个呈现程序上的依赖项都会发生变化。”

我理解为什么会发生这种情况，但我不知道如何编写我的代码来实现我想做的事情。

我的代码是：

const CheckoutComponent = () => {
    const { checkoutProducts } = useSelector((state)=> state?.allCartProducts);
    const [totalPrice, setTotalPrice] = useState(0);

    const costOfItems = ()=> {
        let itemsTotalCost = 0;
        checkoutProducts?.map((product)=> {
          itemsTotalCost += product?.price * product?.quantity;
        })
        return itemsTotalCost;
    }

   useEffect(()=> {
    setTotalPrice(costOfItems());

})

  return (
    <h1>The total amount is {totalPrice}</h1>
)

}

我在整个'checkoutProducts‘数组中执行映射，因为我希望得到数组中每个对象的价格和数量属性的乘积(乘积的结果)。然后，我把所有的东西总结在一起，然后再把它还回去。以下功能就是这样实现的。

const costOfItems = ()=> {
        let itemsTotalCost = 0;
        checkoutProducts?.map((product)=> {
          itemsTotalCost += product?.price * product?.quantity;
        })
        return itemsTotalCost;
    }

之后，我在UseEffect钩子中调用这个函数，没有依赖项，因为每当组件中的任何东西发生变化时，我都希望它呈现。我还使用此函数的返回值来设置状态'totalPrice‘，以便稍后引用它。因此，下面的代码行：

   useEffect(()=> {
    setTotalPrice(costOfItems());

})

  return (
    <h1>The total amount is {totalPrice}</h1>
)

但是，无论是向UseEffect钩子添加依赖项数组，还是删除数组，还是将依赖项设置为函数“费用of”，我都会得到该错误：

// doesn't work
 useEffect(()=> {
    setTotalPrice(costOfItems());

})

// doesn't work either
 useEffect(()=> {
    setTotalPrice(costOfItems());

}, [])

// doesn't work too
 useEffect(()=> {
    setTotalPrice(costOfItems());

}, [costOfItems])

这是我陷入困境的地方，因为我不能将该函数的调用附加到jsx中任何元素的“onClick”，因为我希望该函数在组件首次挂载时或组件中的任何更改时运行。拜托，我还有别的办法可以做到吗？

Answer 1

问题

您忘记使用依赖数组了。

现在，使用setTotalPrice触发这个导致无限循环的useEffect

解决方案

添加依赖项数组

useEffect(()=> {
  setTotalPrice(costOfItems());
}, [costOfItems])