reactjs - 为什么我无法在 React Hooks 中只使用一次道具？

Question

所以我循环遍历一个数组并将每次迭代传递给一个 React Hook。在这个反应钩子组件中，我显示了一个正常工作的引导卡。此卡上还有一个按钮，可打开一个模式，显示有关当前用于卡的道具对象的更多信息。单击按钮时，它会打开模态，但模态只会包含有关第一次迭代的信息。每次迭代都会正确显示所有卡片，但模态不会。

export const ProductCard = (props) => {
  const [rating, setRating] = useState();
  const [title, setTitle] = useState("");
  const product = props.product;

  const dispatch = useDispatch();

  const productTitle = product.title;
  const productReviews = product.reviews;

  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">
        {console.log(product.title)}
        <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>
                <hr className="line-break quickshop-linebreak" />
                <hr className="line-break quickshop-linebreak" />
                <div
                  className="quickshop-add-product"
                  data-dismiss="modal"
                  data-toggle="modal"
                  data-target="#productAddedModal"
                >
                  <p className="quickshop-add-to-cart">ADD TO CART</p>
                  <IoCartOutline className="quickshop-cart-icon" />
                </div>
                <div
                  className="quickshop-add-wishlist"
                  data-dismiss="modal"
                  data-toggle="modal"
                  data-target="#productAddedModal"
                >
                  <p className="quickshop-add-to-wishlist">ADD TO WISH LIST</p>
                  <HiOutlineHeart className="quickshop-wishlist-icon" />
                </div>
                <Link
                  style={viewDetailsStyle}
                  to="/"
                  className="quickshop-view-all-details"
                >
                  View All Details
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

我已经删除了这个组件的所有功能。我可以记录每次迭代，它会记录每个迭代，因此它可以正确地遍历数组。我不确定为什么在打开任何模式时它只显示第一次迭代信息。

这里要求的是我在数组中循环的组件

import React, { useEffect } from "react";
import { Container, Row, Col } from "react-bootstrap";
import { ProductCard } from "../Product-Card/ProductCard";
import { useSelector, useDispatch } from "react-redux";
import { product } from "../../actions/products";

import "./ProductList.css";

export const ProductList = () => {
  // const [products, setProducts] = useState([]);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(product());
  }, []);

  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>
  );
};

标签： reactjsreact-hooksreact-props