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}

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

React-Bootstrap modal only show and delete last mapped element

reactjs

react-bootstrap

react-bootstrap4-modal