useEffect 运行无限循环，虽然它应该工作一次

Question

我有这个效果，应该可以工作一次，但它会无限循环。我们能解释一下发生了什么吗？

   useEffect(() => {
     (async () => {
       const cartId = localStorage.getItem('cart-id');
       try {
         const {cart, products} = await (await fetch('/api/cart' + (cartId ? '?id=' + cartId : ''))).json();
         setCart(cart);
         setProducts(products);
       } catch (e) {}
     })();
   }, []);

我成功获得了购物车 ID。

try-catch 应该可以工作一次，即使我出于任何原因没有得到任何产品？

Answer 1

第二个参数（在您的示例中为空数组）允许运行您的代码，仅当参数更改时。利用该尝试使您的效果依赖于cartId

  const cartId = localStorage.getItem('cart-id');
  useEffect(() => (async () => {
       try {
         const {cart, products} = await (await fetch('/api/cart' + (cartId ? '?id=' + cartId : ''))).json();
         setCart(cart);
         setProducts(products);
       } catch (e) {}
     })(), [cartId]);