反应钩子 - 如何显示数组的一个图像

Question

以下代码产生：List of artists

第一个 JS 文件 Artists.js 我通过 useState() 钩子中的对象数组 map() 生成艺术家列表，但现在如何创建一个仅显示详细信息的 onClick选定的艺术家？当我执行 console.log() 时，我得到了我点击的艺术家的数据，但更进一步，我似乎无法在 onClick 链接到的 details.js 页面上显示该数据。请有人帮忙。

（艺术家.js）

import React, { useContext } from "react";
import { Link } from "../components/Router";
import { ArtistContext } from "../ArtistContext";

const Artists = () => {
  const [artists, setArtists] = useContext(ArtistContext);
  return (
    <div className="container-fluid">
      <div className="row mt-5">
        {artists.map(artist => (
          <div className="col-10 col-lg-4 mx-auto mt-5 mb-5" key={artist.id}>
            <div className="card" style={{ width: "18rem" }}>
              <img
                src={artist.img}
                alt={artist.headerTitle}
                style={{ width: "100%", height: "250px" }}
                className="card-img-top"
              />
              <div className="card-body">
                <h3 className="card-title text-uppercase">
                  {artist.headerTitle}
                </h3>
                <h5 className="card-title">{artist.headerSubTitle}</h5>
                <p className="card-text">{artist.headerText}</p>
                <Link
                  to="/details"
                  className="btn btn-outline-primary text-uppercase"
                  onClick={() => console.log(artist)}
                >
                  Gallery
                </Link>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
export default Artists;

(details.js)

import React, { useContext } from "react";

import { ArtistContext } from "../ArtistContext";

const Details = props => {
  const [artists, setArtists] = useContext(ArtistContext);

  return <div className="container-fluid">{artist.title}</div>;
};
export default Details;

Answer 1

当你使用<Link/>挂载细节时，你可以在路由中传递艺术家的id，​​并通过匹配details.js中useContext的id来访问艺术家

在 artists.js 中

      <Link
          to={"/details/" + artist.id}
          className="btn btn-outline-primary text-uppercase"
          onClick={() => console.log(artist)}
        >

根据你使用的路由器，我可以回答如何在子进程中接收参数（details.js）。