это может быть трудным орешком, и я не уверен, что то, что я делаю, правильно.
Итак, у меня есть список фильмов, которые я получаю с помощью API. Каждый объект фильма содержит идентификатор, название, время выполнения и т. д.
Что я хочу сделать, так это сопоставить пользователям каждый любимый фильм с их именами и использовать названия фильмов в качестве ссылок, которые отправят пользователя на страницу с дополнительной информацией об этом фильме. И я хочу, чтобы маршрут был идентификатором фильма. Так, например, если я нажму на «Короля Льва» (который имеет идентификатор 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 в данный момент. Любая помощь высоко ценится. Кроме того, я пытался найти ответы, но не нашел ничего, что могло бы мне помочь. Если какие-то подобные проблемы решались, очень хотелось бы их увидеть.
Спасибо!
Просто используйте item.movieId
напрямую в href
.
<Link key = {item.movieId} href = {`/movies?movieId=${item.movieId}`}>
Наполовину несвязанный QnA, но объясню, почему установка состояния и попытка чтения следующей строки не работает в React: stackoverflow.com/questions/54069253/… TL;DR Обновления состояния React не обрабатываются немедленно. Просто передайте идентификатор фильма непосредственно в целевой строке ссылки, например ответ Unmitigated ниже.