我正在尝试使用删除按钮构建一个购物车，该按钮在每次单击时删除该项目答案

【问题标题】：I'm trying to build a shopping cart with a remove button that deletes the item each time it is clicked我正在尝试使用删除按钮构建一个购物车，该按钮在每次单击时删除该项目
【发布时间】：2021-07-10 08:17:16
【问题描述】：

我正在尝试构建一个带有删除按钮的购物车，每次单击删除时都会删除该项目。我已经用过滤器方法完成了这个。但是每当我这样做并再次添加该项目时，该数量不会被删除，它只会更新它在删除之前的数量。因为我已经删除了数组，所以它应该给我 0 的值。

import React, {useContext} from 'react'
import useCountsContext from './context/useCountsContext.js'

function Cart() {
  const {item, setItem} = useContext(useCountsContext)
  const {count, setCount} = useContext(useCountsContext)

  const removeItem = (productId) => {
    const newItem = item.filter(i => i.id !== productId)
    const exists = item.findIndex((i) => i.id === productId);
    setItem(newItem)
    setCount(count - item[exists].counts)
  }

    return (
        <div>
          {item.map(({id, img, counts, finalPrice, title}) => (
            <>
            <img className="img___shop" key={id} src={img}></img>
            <p>{title}</p>
            <p>Quantity: {counts}</p>
            <p>Price: {finalPrice}$</p>
            <button onClick={() => removeItem(id)}>Remove</button>
            <p></p>
            </>
          ))}
        </div>
    )
}

export default Cart

【问题讨论】：

useCountsContext 中有什么内容？

标签： javascript reactjs

【解决方案1】：

由于您将count 状态包含在循环中的一堆回调中，因此您应该使用功能状态更新来正确地从先前的状态更新，而不是在回调范围内关闭状态。幸运的是，这是一个非常简单的改变。

setItem(item => item.filter(i => i.id !== productId));
setCount(count => count - item[exists].counts);

回调代码：

const removeItem = (productId) => {
  const exists = item.findIndex((i) => i.id === productId);

  setItem(item => item.filter(i => i.id !== productId));
  setCount(count => count - item[exists].counts);
}

一种优化方法是同时传递当前元素的 counts 值，这样您的回调就不需要每次都搜索 items 数组。

const removeItem = (productId, counts) => {
  setItem(item => item.filter(i => i.id !== productId));
  setCount(count => count - counts);
}

在用户界面中

<button onClick={() => removeItem(id, counts)}>Remove</button>

【讨论】：