Question

我在本地存储中有一个购物车

const cart = [
  {_id: 'abcd1234', productName: 'product1', price: '100'},
  {_id: 'abcd12345', productName: 'product2', price: '200'},
  {_id: 'abcd123456', productName: 'product3', price: '150'},
  {_id: 'abcd1234567', productName: 'product4', price: '175'},
];

并将其映射为显示购物车商品，并带有删除商品的按钮

<Container>
      <div>
      {
        cart.map(item => (
        <p>item.productName</p>
        <p>item.price</p>
        <i class="fas fa-trash-alt mr-1" style={{ color: '#ff6b6b' }} onClick={removeProduct}></i>
))
      }
      </div>
</Container>

这是我要删除的功能

  const removeProduct = () => {
    const cart = JSON.parse(localStorage.getItem("cartProduct"));
    let indexToRemove = 1;
    cart.splice(indexToRemove, 1)
    localStorage.setItem("cartProduct", JSON.stringify(cart));
    window.location.reload();
 };

每次我尝试删除product2，product 3或product4时，删除的是先前的产品。例如，我要删除product4，因此删除的是product3。

仅剩一种产品时，就无法删除。你可以帮帮我吗？谢谢

Answer 1

您需要将当前项目的索引发送到removeProduct函数，以便它知道要删除的项目。

<Container>
  <div>
    {
      cart.map((item, index) => ({
        <p>item.productName</p>
        <p>item.price</p>
        <i class="fas fa-trash-alt mr-1" style={{ color: '#ff6b6b' }} onClick={() => this.removeProduct(index)}></i>
      ))
    }
  </div>
</Container>

在removeProduct功能上，您必须删除index位置的项目。

const removeProduct = (indexToRemove) => {
    const cart = JSON.parse(localStorage.getItem("cartProduct"));
    cart.splice(indexToRemove, 1)
    localStorage.setItem("cartProduct", JSON.stringify(cart));
    window.location.reload();
};

Answer 2

按如下所示更改removeproduct代码。并将product-id作为参数传递给函数。

const removeProduct = (productId) => {
    let cart = JSON.parse(localStorage.getItem("cartProduct"));
    cart = cart.filter(productData => productData._id !== productId)
    localStorage.setItem("cartProduct", JSON.stringify(cart));
    window.location.reload();
 };

有关filter方法的更多详细信息，请参考MDN文档。

按如下所示更改组件，以将id参数传递给函数。

<Container>
      <div>
      {
        cart.map(item => (
         <p>item.productName</p>
         <p>item.price</p>
         <i
          class="fas fa-trash-alt mr-1"
          style={{ color: '#ff6b6b' }}
          onClick={() => removeProduct(item._id)}
         ></i>
        ))
      }
      </div>
</Container>

反应从对象数组中删除项目

2 个答案: