Реагируйте, похоже, я не могу превратить каждый идентификатор фильма в ссылку поставщика фильма

Проект Sandbox React

Итак, у меня есть список отображаемых идентификаторов фильмов, полученных из API. Мне также удалось вызвать другую конечную точку API, чтобы получить ссылку на поставщика фильмов, но с использованием идентификатора MOVIE ID в качестве параметра в другом вызове выборки. Мне удалось отобразить одну из ссылок с идентификатором фильма. Как вы можете видеть в этой песочнице в браузере, я смог вернуть ОДНУ ссылку. Но мне нужны остальные ссылки, которые принадлежат другим идентификаторам фильмов. У меня есть проблемы с тем, чтобы это работало, я смог отобразить только один. Я поместил код ниже, но рекомендую заглянуть в песочницу, чтобы понять, что я имею в виду.


    import "./styles.css";
    import React, { useEffect, useState } from "react";
    import { render } from "react-dom";
    
    const getMovieDetail = (movieId) => {
      const url = `https://api.themoviedb.org/3/movie/${movieId}/watch/providers?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95`;
      return fetch(url);
    };
    
    function MovieDetail(props) {
      const [movie, setMovie] = useState(null);
      const { id } = props;
    
      useEffect(() => {
        getMovieDetail(id)
          .then((res) => res.json())
          .then((res) => setMovie(res.results.US.link));
      }, [id]);
    
      return movie ? (
        <code>{JSON.stringify(movie)}</code>
      ) : (
        <p>Probably fetching data</p>
      );
    }
    
    export default function App() {
      const [trending, setTrending] = useState([]);
    
      //set movieID to get the movie ID's
    
      //set link to get the providerlink that belongs to each movieID.
    
      useEffect(() => {
        const trendUrl =
          "https://api.themoviedb.org/3/trending/movie/week?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95";
        fetch(trendUrl)
          .then((response) => response.json())
          .then((data) => {
            setTrending(data.results);
          })
          .catch((error) => {
            console.info("Error!! Data interupted!:", error);
          });
      }, []);
    
      const moviesIdCollections = trending.map((item) => item.id);
    
      return (
        <div className = "App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <MovieDetail id = {moviesIdCollections} />
          {moviesIdCollections.map((elm) => (
            <p key = {elm}>{elm}</p>
          ))}
        </div>
      );
    }

Поведение ключевого слова "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) для оценки ваших знаний,...
0
0
30
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, что компилятор жалуется на тип данных. можно проверить добавив? отметка.

function MovieDetail(props) {
  //...
  useEffect(() => {
    getMovieDetail(id)
      .then((res) => res.json())
      .then((res) => setMovie(res?.results?.US?.link));
  }, [id]);
 //...
}

Все, что я пытаюсь сделать, это запустить каждую из функций MovieID с помощью getmovieDetail и movieDetail, чтобы получить ссылку на каждую из них. как показано на самом верху.

Alex Smith 05.04.2021 05:06

Что это ? отметку делать в setMovie>?

Alex Smith 05.04.2021 21:29

Это граммер javascript, который проверяет наличие. то же самое с setMovie (res && res.results && res.results.US && res.results.US.link)

Tae Yeong Han 06.04.2021 02:58

Это просто не складывается в моей голове, хотя с setMovie (res? .Results? .US? .Link); так это говорит setMovie (если res, если результаты, если США, если ссылка?

Alex Smith 06.04.2021 03:51
Ответ принят как подходящий
import "./styles.css";
import React, { useEffect, useState } from "react";
import { render } from "react-dom";

const getMovieDetail = (movieId) => {
  const url = `https://api.themoviedb.org/3/movie/${movieId}/watch/providers?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95`;

  return fetch(url);
};

function MovieDetail({id}) {
  const [movie, setMovie] = useState(null);

  useEffect(() => {
    console.info(id);
    getMovieDetail(id)
      .then((res) => res.json())
      .then((res) => setMovie(res?.results?.US?.link));
  }, [id]);

  return movie ? (
    <code>{JSON.stringify(movie)}</code>
  ) : (
    <p>Probably fetching data</p>
  );
}

export default function App() {
  const [trending, setTrending] = useState([]);

  //set movieID to get the movie ID's

  //set link to get the providerlink that belongs to each movieID.

  useEffect(() => {
    const trendUrl =
      "https://api.themoviedb.org/3/trending/movie/week?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95";
    fetch(trendUrl)
      .then((response) => response.json())
      .then((data) => {
        setTrending(data.results);
      })
      .catch((error) => {
        console.info("Error!! Data interupted!:", error);
      });
  }, []);

  const moviesIdCollections = trending.map((item) => item.id);

  return (
    <div className = "App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      {moviesIdCollections.map((elm) => (
        <>
          {" "}
          <MovieDetail id = {elm} />
          <p key = {elm}>{elm}</p>
        </>
      ))}
    </div>
  );
}

Вам нужно нажать MovieDetail в moviesIdCollections.map, чтобы он мог отображать всю ссылку на фильм

БЛАГОДАРЮ ВАС! Я как сумасшедший пытался получить это последние несколько дней, но безуспешно!

Alex Smith 05.04.2021 20:59

Что случилось с? setMovie (res? .results? .US? .link)); и почему не работает без вопросительных знаков?>

Alex Smith 05.04.2021 21:28
? Просто проверяет, имеют ли объекты допустимое значение. Если у res? .Results нет результатов, он все равно будет действителен для компилятора
Cadmus 06.04.2021 08:33

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