小编Avi*_*hen的帖子

我正在尝试使用 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 …