NextJS Как мне использовать идентификатор из списка объектов и перенаправить на страницу на основе этого?

это может быть трудным орешком, и я не уверен, что то, что я делаю, правильно.

Итак, у меня есть список фильмов, которые я получаю с помощью 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 в данный момент. Любая помощь высоко ценится. Кроме того, я пытался найти ответы, но не нашел ничего, что могло бы мне помочь. Если какие-то подобные проблемы решались, очень хотелось бы их увидеть.

Спасибо!

Наполовину несвязанный QnA, но объясню, почему установка состояния и попытка чтения следующей строки не работает в React: stackoverflow.com/questions/54069253/… TL;DR Обновления состояния React не обрабатываются немедленно. Просто передайте идентификатор фильма непосредственно в целевой строке ссылки, например ответ Unmitigated ниже.

Drew Reese 13.09.2022 18:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
121
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто используйте item.movieId напрямую в href.

<Link key = {item.movieId} href = {`/movies?movieId=${item.movieId}`}>

Другие вопросы по теме