如何在地图功能中使用模态？

Question

我正在尝试使用 React.JS 和 Reactstrap 制作 Gallery 应用程序。我正在使用map() 函数来显示卡片中的每一件艺术品。在每张卡片中，都有一个按钮可以打开模式以显示来自地图功能的更多数据。我的问题是，当我单击按钮从任何卡片打开模式时，它会显示页面上最后一张卡片的数据。

代码：

const Artcards = ({ state, loading }, props) => {
  const { buttonLabel, className } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);



  if (loading) {
    return <h2>Loading</h2>;
  }

  return (
    <CardGroup className="CardGroup">
      {state.map((state, index) => {
        return (
          <div key={index}>
            <Card className="Card" style={{ padding: "0", height: "39rem" }}>
              <CardBody className="pt-3">
                <CardTitle className="CardTitle">
                  Art Name:
                  <h6 className="CardParagraph">{state.artName}</h6>
                </CardTitle>
                <CardSubtitle>
                  Artist Name:
                  <h6 className="CardParagraph">{state.artistName}</h6>
                </CardSubtitle>
                <CardImg
                  top
                  src={state.source}
                  alt={state.artName}
                />
              </CardBody>
              <CardBody>
                <CardText>
                  Description:
                  <div className="CardParagraph">{state.description}</div>
                </CardText>
                <CardText>
                  Price:<div className="CardParagraph">{state.price} </div>
                </CardText>
                <Button size="sm" color="danger" className=" m-1">
                  Buy
                </Button>
                <br></br>
                <Button color="success" onClick={toggle}>
                  Contact Artist
                </Button>
              </CardBody>
              <Modal
                isOpen={modal}
                state={state}
                fade={false}
                toggle={toggle}
                className={className}
              >
                <ModalHeader className="bg-dark text-primary" toggle={toggle}>
                  here the {state.artistName} should be
                </ModalHeader>
                <ModalBody>
                  <p>Header:{state.artName}</p>
                  <textarea
                    style={{ overflow: "auto", resize: "none"}}
                    rows="5"
                    cols="60"
                    placeholder="Write your message"
                  ></textarea>
                  <Input
                    type="text"
                    placeholder="Write Email or Tel number for response"
                  ></Input>
                </ModalBody>
                <ModalFooter>
                  <Button color="primary" onClick={toggle}>
                    Send message
                  </Button>{" "}
                  <Button color="secondary" onClick={toggle}>
                    Cancel
                  </Button>
                </ModalFooter>
              </Modal>
            </Card>
          </div>
        );
      })}
    </CardGroup>
  );
};

Answer 1

您在这里所做的不仅仅是打开最后一个，而是打开所有模态，并且只有最后一个显示，因为它位于所有其他模块之上。

您需要做的是只有一个模态并保存点击卡片的索引，然后只显示该卡片中的数据。

这就是你需要做的事情

1. 从.map 中移除模态框
2. 有另一个状态来存储索引或卡片中的数据
3. 仅在模态中显示所选卡片中的数据

在很多地方，state 来自道具，然后在 .map 中使用相同的名称，您还对变量 state 进行了某种奇怪的使用。您应该将该名称更改为更具描述性的名称，因为这会使事情变得非常混乱。