ReactJS-如何从功能组件的数组中删除项目？

如何解决ReactJS-如何从功能组件的数组中删除项目？

我正在尝试使用ReactJS创建一个简单的购物车，但我想出了一个可能的出路，但是每当我单击设置的“删除”按钮时，它实际上并不会从购物车中删除商品。这些就是我的州经理在这里：

let[product,setProduct] = useState([])
//The function bellow is what I use to render the products to the user
const[item] = useState([{
        name: 'Burger',image: '/static/media/Burger.bcd6f0a3.png',id: 0,price: 16.00
    },{
        name: 'Pizza',image: '/static/media/Pizza.07b5b3c1.png',id: 1,price: 20.00
    }])

并且我有一个将项目中的对象添加到产品数组中的函数，然后有一个应该删除它们的函数，如下所示：

    const removeItem=(idx)=>
{
    // let newProduct = product.splice(idx,1)
    // setProduct([product,newProduct])
    // $('.showItems').text(product.length)
    // product[idx]=[]
    product.splice(idx,1)

    if(product.length<=0)
    {
        $('.yourCart').hide()
    }
}

此函数从这里调用：

                    {product.map((item,idx)=>
                <div className='yourCart' key={idx}>
                    <hr></hr>
                    <div>
                        <img src ={item.image}></img>
                        <h3 className='burgerTitle'>{item.name}</h3>
                        <h4><strong>$ {item.price}.00</strong></h4>
                        <Button variant='danger' onClick={()=>removeItem(idx)}>Remove</Button>
                    </div>
                    <br></br>
              </div>)}

问题是我尝试使用spset，setState，甚至尝试清除整个数组并添加对它应用过滤器函数后剩下的元素，但这无济于事。如何做到这一点，以便当我单击删除按钮时，它可以从阵列中删除特定项目？

解决方法

您需要使用useState挂钩提供的突变方法setProduct来突变product状态。

const removeItem = (id) => {
    const index = product.findIndex(prod => prod.id === id); //use id instead of index
    if (index > -1) { //make sure you found it
     setProduct(prevState => prevState.splice(index,1));
    }   
}

用法

<Button variant='danger' onClick={()=>removeItem(item.id)}>Remove</Button>

作为旁注：

在处理数组中的项目而不是数组中的索引时，请考虑使用确定的id值。项目索引可以更改。映射时，请使用item.id作为键而不是索引。考虑使用guids作为标识。

{product.map((item,idx)=>
  <div className='yourCart' key={`cartItem_${item.id}`}> //<-- here
      <hr></hr>
      <div>
          <img src ={item.image}></img>
          <h3 className='burgerTitle'>{item.name}</h3>
          <h4><strong>$ {item.price}.00</strong></h4>
          <Button variant='danger' onClick={()=>removeItem(item.id)}>Remove</Button>
      </div>
      <br></br>
</div>)}

您可以将removeItem定义为function，它会得到id（而不是索引，因为这样更安全）和setProduct到应保留的子集。这可以通过多种方式实现，在此特定示例中，我使用.filter()来查找product的子集，这些子集的元素id与要删除的元素不同，并设置了结果为product的新值。

removeItem = (id) => {
  setProduct(product.filter((i)=>(i.id !== id)))
 
}