您好，這可能是一個難以破解的難題，我不確定我所做的是否正確。
所以我有一個通過 API 獲取獲得的電影串列。每個電影物件都包含一個 id、標題、運行時間等。
我想要做的是將用戶最喜歡的電影與他們的名字進行映射，并使用電影名稱作為鏈接，將用戶發送到包含有關該電影的更多資訊的頁面。我希望路線成為電影的 ID。例如，如果我點擊 The Lion King（id 為 1），地址欄會顯示 /movies?movieId=1
我嘗試過的代碼如下所示：
import { useRouter } from "next/router";
import { useState } from "react";
export const getServerSideProps = async (context) => {
const { id } = context.query;
const res = await fetch(`${process.env.BACKEND_URL}/User/${id}`);
const data = await res.json();
const res2 = await fetch(`${process.env.BACKEND_URL}/User/${id}/movies`);
const data2 = await res2.json();
return {
props: { user: data, movies: data2},
};
}
function Page({ user, movies }) {
const router = useRouter();
const [selectedMovie, setSelectedMovie] = useState();
return(
<div className={styles.movies}>
{movies.map((item)=>{
<Link key={item.movieId} value={item.movieId} onClick={(event) =>
setSelectedMovie(event.target.value)}
href={`/movies?movieId=${selectedMovie}`}>
<a>{item.movie.name}</a>
</Link>
</div>
);
}
我想我已經很接近了，但我也感到很失落。地址欄現在顯示/movies?movieId=undefined。非常感謝任何幫助。我也嘗試過尋找答案，但我沒有找到任何可以幫助我的東西。如果有任何類似的問題得到解決，我非常希望看到它。
謝謝！
uj5u.com熱心網友回復：
直接用item.movieId在href.
<Link key={item.movieId} href={`/movies?movieId=${item.movieId}`}>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/506774.html
標籤：javascript 反应钩子 下一个.js