如何在NEXT.js中通过id从json数组中的数据中选择一项

Question

我是Next.js的新手，正在从api中获取数据。我有一个电影列表，我想选择一部电影并在新页面上显示该电影图像。我想我必须使用对象id，但我不知道如何使用。这就是我目前所拥有的：

这是我起始页的代码：

<div className="movies">
{props.movies.map(movie => (
<div>
<p>{movie.name}</p>
<Link href={`/detailPage?movieId=${movie.image}`}>
<img src={movie.image}></img>
</Link>
</div>
))}

这是来自详细页面的代码：

<section>
<div>
<img src={movieId.image}></img>
</div>
</section>

Answer 1

您需要从数组中获取要显示的对象。你可以这样做：

const movie = props.movies.find((m) => m.id === idOfTheMovieYouWant);
return (
<section>
<div>
<img src={movie.image} />
</div>
</section>
);