Question

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

代码：

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

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

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

这就是您需要做的

从.map内删除模态
具有另一种状态来存储卡中的索引或数据
仅在模式中显示所选卡中的数据

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

如何在地图函数中使用模态？

1 个答案: