react hooks-如何显示数组的一个图像

Question

以下代码生成：艺术家列表

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

(artists.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)}
>

根据你使用的路由器，我可以回答如何在子代中接收params(details.js(。