0

所以我正在遍历一个数组并为每次迭代显示一个引导卡。此卡片中有一个按钮，用于打开模式并显示有关每次迭代的更多信息。它当前正在正确显示卡片，但是当单击每张卡片上的按钮时，它将始终显示有关第一次迭代的信息的模式。

这是第一个遍历数组并将每次迭代传递给包含引导卡和模式的组件的组件。

export const ProductList = () => {
  const filteredProductsList = useSelector(
    (state) => state.productReducer.filteredData
  );
  return (
    <div className="product-list-container">
      <Container>
        <Row xs={2} md={3} lg={4}>
          {filteredProductsList.map((product) => {
            return (
              <Col key={product._id}>
                <ProductCard product={product} />
              </Col>
            );
          })}
        </Row>
      </Container>
    </div>
  );
};

这是包含引导卡以及要打开的模式的组件。

export const ProductCard = (props) => {
    const [title, setTitle] = useState("");
    const [addedToCart, setAddedToCart] = useState();
    const product = props.product;
  
    const productTitle = product.title;
  
    const allProducts = useSelector((state) => state.productReducer.data);
  
    return (
      <>
        <Card className="product-card">
          <div className="image">
            <Card.Img
              className="product-img d-block mx-auto"
              variant="top"
              src={product.image}
            />
            <div className="image-overlay">
              <Button
                data-toggle="modal"
                data-target="#productModal"
                className="cart-button"
                style={buttonStyle}
              >
                quick shop
              </Button>
            </div>
          </div>
          <Card.Body className="text-center">
            <Link
              to="/"
              className="body-link"
              style={{ textDecoration: "none" }}
            ></Link>
            <Card.Title className="card-title">{title}</Card.Title>
            <Card.Text className="card-text-rating">{rating}</Card.Text>
            <Card.Text className="card-text-price">${product.price}</Card.Text>
          </Card.Body>
        </Card>
        <div className="container">
          <div
            className="modal left fade"
            id="productModal"
            tabIndex=""
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div className="modal-dialog product-modal-dialog" role="document">
              <div className="modal-content product-modal-content">
                <div className="modal-header quickshop-modal-header">
                  <p className="quickshop-title">Quick View</p>
                  <button
                    type="button"
                    className="close quickshop-close"
                    data-dismiss="modal"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div className="modal-body product-modal-body">
                  <p className="quickshop-product-title">{title}</p>
                  <img
                    src={product.image}
                    alt="product-img"
                    className="quickshop-product-image"
                  />
                  <hr className="line-break" />
                  <div className="quickshop-price-container">
                    <p className="quickshop-price-title">Price:</p>
                    <p className="quickshop-price-number">${product.price}</p>
                  </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </>
    );
  };

它再次正确显示卡，但是当我使用位于卡上的按钮打开模式时，它会打开一个模式，其中仅包含有关第一次迭代的信息，无论单击哪张卡。任何提示和方向表示赞赏。

4

0 回答 0