我正在尝试从一个组件切换到另一个组件，而第二个组件需要使用第一个组件数组中的一个项
问题是第二个组件总是遍历整个数组直到最后一个元素，并且只显示它，但是我想遍历onclick中的索引
image1image2
这是卡片的组成部分

import { useState } from "react";
import { Button } from "react-bootstrap";
import { Card } from "react-bootstrap";
import { useSelector } from "react-redux";
import ShowDetails from "./ShowDetails";

export default function Electronic() {
  const electronics = useSelector((state) => state.productReducer);
  const [modalShow, setModalShow] = useState(false);

  //debugger
  return (
    <>
      <center dir="rtl">
        <br></br>
        <br></br>
        <br></br>
        <br></br>
        {electronics.map((item) => (
          <>
            <Card
              style={{
                width: "18rem",
                display: "inline-block",
                backgroundColor: "white",
                textAlign: "center",
                borderColor: "#fade0f",
                margin: 5,
              }}
            >
              <Card.Img
                variant="top"
                src={item.product_image}
                style={{ width: 100, height: 100 }}
              />
              <Card.Body>
                <Card.Title dir="rtl">{item.name}</Card.Title>
                <Button
                  style={{ backgroundColor: "#fade0f", borderColor: "#fade0f", color: "black" }}
                  variant="primary"
                  onClick={() => setModalShow(true)}
                >
                  פרטים
                </Button>
              </Card.Body>
              <ShowDetails
                products={item}
                show={modalShow}
                onHide={() => setModalShow(false)}
              ></ShowDetails>
            </Card>
          </>
        ))}
        <br></br>
        <br></br>
        <br></br>
        <br></br>
      </center>
    </>
  );
}

这是显示细节的模型：

import { useState } from "react";
import { Image } from "react-bootstrap";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

export default function ShowDetails(props) {
  const [amount, setAmount] = useState(1);
  return (
    <>
      <Modal
        {...props}
        size="sm"
        aria-labelledby="contained-modal-title-vcenter"
        centered
        style={{ textAlign: "center" }}
        animation={true}
      >
        <Modal.Header closeButton></Modal.Header>

        <Modal.Body dir="rtl">
          <Image
            variant="top"
            src={props.products.product_image}
            style={{ width: 200, height: 200 }}
          />
          <Modal.Title id="contained-modal-title-vcenter" style={{ textAlign: "center" }}>
            {props.products.name}
          </Modal.Title>
          <h5>{props.products.description}</h5>
          <h4>{props.products.price * amount} ₪</h4>

          <Button
            style={{ backgroundColor: "#fade0f", borderColor: "#fade0f", color: "black" }}
            onClick={() => {
              setAmount(Math.max(1, amount - 1));
            }}
          >
            -
          </Button>
          <h4 style={{ display: "inline-block", margin: 10 }}>{amount}</h4>
          <Button
            style={{ backgroundColor: "#fade0f", borderColor: "#fade0f", color: "black" }}
            onClick={() => {
              setAmount(Math.min(props.products.qty, amount + 1));
            }}
          >
            +
          </Button>
          <br></br>
          <br></br>
          <Button
            style={{
              backgroundColor: "#fade0f",
              borderColor: "#fade0f",
              color: "black",
              width: 200,
            }}
            onClick={() => {
              setAmount(1);
            }}
          >
            הוספה לסל
          </Button>
        </Modal.Body>
      </Modal>
    </>
  );
}

我期望它向我显示USB的图像，最后它向我显示了计算机的扬声器，这是阵列的最后一个成员，我该如何修复它？