Reactjs 当我想从购物车中删除项目时，超出了最大更新深度

我无法从localStroage获取产品。我使用useEffect获取本地存储中的所有产品

useEffect(() => {
  setItemsInCart(getItemFromCart())
}, [itemsInCart])

getItemFromCart是my cartHelper组件中的函数：

export const getItemFromCart = () =>{
    if(typeof window !== 'undefined'){
      if(localStorage.getItem('cart')){
        return JSON.parse(localStorage.getItem('cart'))
      }else{
        return []
      }
    }
}

然后我映射购物车中的所有项目：

const showCartProducts = (itemsInCart) => {
    return (
        <div>
          {itemsInCart.map((product,index)=>{
            return(
              <div>
            <Card
              key={index}
              product={product}
              showAddToCartButton={false}
              showQuantityInput={true}
              removeFromCartButton={true}
                    />
              </div>
            )
          })}
        </div>
    );
};

---

我不知道如何解决这个问题，请帮助我：）。

问题在于以下代码

useEffect(() => {
  setItemsInCart(getItemFromCart())
}, [itemsInCart])

无论何时您更改

itemsInCart

它都会被调用，而在您的内部，您再次更改

itemsInCart

它就像一个无限循环

如果希望从本地存储中提取一次，可以将其更改为

useEffect(() => {
  setItemsInCart(getItemFromCart())
}, []) // empty dependency array.

要删除项目，您可以在功能中通过重置项目或从

itemsInCart

中删除项目来更新

itemsInCart

重置新值

export const removeItem = productId => {
     let cart = [];
       if (typeof window !== "undefined") {
         if (localStorage.getItem("cart")) {
          cart = JSON.parse(localStorage.getItem("cart"));
      }

      cart.map((product, i) => {
          if (product._id === productId) {
              cart.splice(i, 1);
          }
      });

      localStorage.setItem("cart", JSON.stringify(cart));
     }
     setItemsInCart(cart);
     return cart;
};

或通过删除而不是上述更改进行更新

setItemsInCart([...itemsInCart.filter(it => it._id !== productId)]);

---

好的，当我单击“删除”按钮时，项目确实已从本地存储中删除，但组件不会重新加载。在删除项目时，您需要从本地存储中删除项目以及设置项目的状态，即ItemsInCart，但问题是，所有这些代码都位于不同的文件中。getItemFromCart-cardHelper.js、showCartProducts和useEffect-Cart.js、removeButton-Card.js它被多次重用。所以，当我想做你的更改时，我得到了一个未定义的错误。你能在codesandbox中添加代码吗？它具有你所拥有的文件夹结构。我通过将removeButton移动到Cart组件并添加onlick with removeItem函数来实现这一点，我从cardHelper组件启动removeItem函数，然后从cardHelper组件再次获取产品localstorage和set itemsInCart。它工作正常：）这种解决方案有什么问题吗？

export const removeItem = productId => {
     let cart = [];
       if (typeof window !== "undefined") {
         if (localStorage.getItem("cart")) {
          cart = JSON.parse(localStorage.getItem("cart"));
      }

      cart.map((product, i) => {
          if (product._id === productId) {
              cart.splice(i, 1);
          }
      });

      localStorage.setItem("cart", JSON.stringify(cart));
     }
     setItemsInCart(cart);
     return cart;
};

setItemsInCart([...itemsInCart.filter(it => it._id !== productId)]);