React-Bootstrap 模式仅显示和删除最后一个映射元素

Question

我正在构建电子商务并且在我的购物车中我想在用户点击删除图标时显示一个模式，但我的模式总是显示并删除我购物车的最后一个元素

我该如何解决这个问题

这是我的模态组件：

const VerticalModal = ({ item, mShow, hide, name }) => {
  return (
    <Modal
      show={mShow}
      size="md"
      
      centered
    >
      <Modal.Header>
        <Modal.Title >
          <h6>Remove from cart</h6>
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <p className="text-center">Are you sure you want to remove {name}</p>
      </Modal.Body>
      <Modal.Footer className="d-flex justify-content-between">
        <Button variant="outline-secondary" size="sm" onClick={hide}>
          Cancel
        </Button>
        <Button variant="outline-danger" size="sm" onClick={item}>
          Remove
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

这是我的购物车代码：

{cart &&
  cart.cartItems.length > 0 &&
  cart.cartItems.map((item, index) => (
    <Card
      key={index}
      className=" cart-card-magninn cart-card-shadow"
    >
      <Row className="p-3">
        <Col>{item.img}</Col>
        <Col>{item.name}</Col>       

        <Col md={2} xs={2}>
          <button
            onClick={() => setModalShow(true)}
          >
            <FontAwesomeIcon icon={faTrashAlt} />
          </button>
          <VerticalModal
            mShow={modalShow}
            hide={() => setModalShow(false)}
            item={() => removeFromCartHandler(item.prodid)}
            name={item.prodname}
          />
        </Col>
        </Row>
        )}

Answer 1

您正在创建四个模式，并且每当模式打开时，它具有最后一项的值。您应该将模式移出地图功能并将所选项目存储在单独的状态中并使用它来删除信息。

将选中的项目初始化为空对象。

const [selectedItem, setSelectedItem] = useState({})

然后，更新按钮上的click 方法。

<button
  onClick={() => {
    setModalShow(true)
    setSelectedItem(item)
  }}>
  <FontAwesomeIcon icon={faTrashAlt} />
</button>

之后，移动modal code outside of the map函数。

{modalShow ? 
  <VerticalModal
    mShow={modalShow}
    hide={() => {
      setModalShow(false)
      setSelectedItem({})
    }}
    item={() => {
       removeFromCartHandler(selectedItem.prodid)
       setSelectedItem({})
    }
    name={selectedItem.prodname}
  />
: null}

更新的代码可能是这样的

{cart &&
  cart.cartItems.length > 0 &&
  cart.cartItems.map((item, index) => (
    <Card
      key={index}
      className=" cart-card-magninn cart-card-shadow"
    >
      <Row className="p-3">
        <Col>{item.img}</Col>
        <Col>{item.name}</Col>       
        <Col md={2} xs={2}>
          <button
            onClick={() => {
              setModalShow(true)
              setSelectedItem(item)
            }}>
            <FontAwesomeIcon icon={faTrashAlt} />
          </button>
        </Col>
        </Row>
   )}
   
   {modalShow ? 
    <VerticalModal
      mShow={modalShow}
      hide={() => {
        setModalShow(false)
        setSelectedItem({})
      }}
      item={() => {
       removeFromCartHandler(selectedItem.prodid)
       setSelectedItem({})
      }
      name={item.prodname}
      />
  : null}