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

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(); };每次我尝试删除一个产品2、产品3或产品4时，删除的是之前的产品。比如我要去掉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>