Итак, у меня есть список отображаемых идентификаторов фильмов, полученных из 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>
);
}
Я думаю, что компилятор жалуется на тип данных. можно проверить добавив? отметка.
function MovieDetail(props) {
//...
useEffect(() => {
getMovieDetail(id)
.then((res) => res.json())
.then((res) => setMovie(res?.results?.US?.link));
}, [id]);
//...
}
Что это ? отметку делать в setMovie>?
Это граммер javascript, который проверяет наличие. то же самое с setMovie (res && res.results && res.results.US && res.results.US.link)
Это просто не складывается в моей голове, хотя с setMovie (res? .Results? .US? .Link); так это говорит setMovie (если res, если результаты, если США, если ссылка?
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, чтобы он мог отображать всю ссылку на фильм
БЛАГОДАРЮ ВАС! Я как сумасшедший пытался получить это последние несколько дней, но безуспешно!
Что случилось с? setMovie (res? .results? .US? .link)); и почему не работает без вопросительных знаков?>
?
Просто проверяет, имеют ли объекты допустимое значение. Если у res? .Results нет результатов, он все равно будет действителен для компилятора
Все, что я пытаюсь сделать, это запустить каждую из функций MovieID с помощью getmovieDetail и movieDetail, чтобы получить ссылку на каждую из них. как показано на самом верху.