有没有办法将 ID 传递给模态以呈现每个用户的正确上下文？

Question

我的 Modal 组件有一个大问题。

我渲染了所有的艺术家，看到了头像，一切都很完美，但是当我点击一个艺术家时，无论是哪一个，它只显示模态中的第一位艺术家。

我不知道如何解决这个问题。我知道这与ID有关，但我在这里不明白。

import React, { useState, useEffect } from "react";
import "../../styles/general-styles.css";
import "./artists-styles.css";
/* import avatar from "../../images/artistavatar.jpg"; */
import firebase from "./firebase";

const Artists = () => {
  const imgStyle = {
    width: "150px",
    border: "1.5px solid lightgray",
    borderRadius: "50%",
    margin: "1rem auto 1rem",
  };

  const [artists, setArtists] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const db = firebase.firestore();
      const data = await db.collection("artists").get();
      console.log(data);
      setArtists(
        data.docs.map(doc => {
          console.log(doc.id);
          return { ...doc.data(), id: doc.id };
        })
      );
    };
    fetchData();
  }, []);

  return (
    <section id="artists">
      {artists.map(artist => (
        <React.Fragment key={artist.id}>
          {/* <div className="d-flex flex-row" key={artist.id}> */}
          <div
            className="col-lg-2"
            style={{
              minWidth: "250px",
              display: "inline-block",
            }}>
            <img
              style={imgStyle}
              src={artist.avatar}
              alt="avatar"
              type="button"
              onClick={console.log("I am clicked!")}
              data-toggle="modal"
              data-target="#artistModal"></img>
            <p>{artist.name}</p>
            <p>{artist.title}</p>
          </div>
          <div
            className="modal fade"
            id="artistModal"
            tabIndex="-1"
            role="dialog"
            aria-labelledby="artistModalTitle"
            aria-hidden="true">
            <div className="modal-dialog modal-dialog-centered" role="document">
              <div className="modal-content">
                <div className="modal-header">
                  <h5 className="modal-title" id="exampleModalLongTitle">
                    {artist.name}
                  </h5>
                  <button
                    type="button"
                    className="close"
                    data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <img style={imgStyle} src={artist.avatar} alt="avatar"></img>
                <div className="modal-body">
                  <div>{artist.bio}</div>
                  <br />
                  <a
                    href={"mailto:" + artist.mail}
                    target="_blank"
                    rel="noopener noreferrer">
                    <i className="far fa-envelope fa-2x footer-icons"></i>
                  </a>
                  <a
                    href={artist.twitter}
                    target="_blank"
                    rel="noopener noreferrer">
                    <i className="fab fa-twitter fa-2x footer-icons"></i>
                  </a>
                  <a
                    href="https://www.facebook.com/groups/889324268527278/"
                    target="_blank"
                    rel="noopener noreferrer">
                    <i className="fab fa-facebook-f fa-2x footer-icons"></i>
                  </a>
                  <a
                    href="https://www.instagram.com/not.art.club/"
                    target="_blank"
                    rel="noopener noreferrer">
                    <i className="fab fa-instagram fa-2x footer-icons"></i>
                  </a>
                  <a
                    href="https://www.reddit.com/r/NotArtClub/"
                    target="_blank"
                    rel="noopener noreferrer">
                    <i className="fab fa-reddit fa-2x footer-icons"></i>
                  </a>
                </div>

                <div className="modal-footer"></div>
              </div>
            </div>
          </div>
        </React.Fragment>
      ))}
    </section>
  );
};

export default Artists;

Answer 1

我不是很熟悉bootstrap，但它渲染第一个模态，因为它们都有相同的id

id="artistModal"

每个模态应该有唯一的 id，像这样：

id={`${artist.name}-modal`}

有没有办法将 ID 传递给模态以呈现每个用户的正确上下文？

Is there a way to pass ID to modal to render the right context of each user?

bootstrap-modal

reactjs