通过map循环在不同组件之间传输数据

Question

我正在尝试从一个组件切换到另一个组件，第二个组件需要使用第一个组件数组中的一个项目

问题是第二个组件总是遍历整个数组直到最后一个元素并只显示它，但我想通过 onclick 中的索引 go

图片1 图片2

这是卡片的组成部分

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

这是显示详细信息的 model：

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 的图像，最后它向我显示计算机的扬声器，这是数组的最后一个成员。 我该如何解决？

Answer 1

您可以简单地为所选产品创建一个挂钩

const [selectedProduct, setSelectedProduct] = useState({});

然后，当您单击一个产品时，您会打开模式并将其存储在selectedProduct中：

<Button
 style={{ backgroundColor: "#fade0f", borderColor: "#fade0f", color: "black" }}
 variant="primary"
 onClick={() => {
  setModalShow(true);
  setSelectedProduct(item)
 }}
>
פרטים
</Button>

现在您不需要将所有产品传递给 model（如果您不需要它们），只需将选定的产品传递给map function 之外的 ShowDetails component ：

<ShowDetails
  product={selectedProduct}
  products={electronics} // <-- if you need them
  show={modalShow}
  onHide={() => setModalShow(false)}
></ShowDetails>