首先让我为我糟糕的格式化能力道歉。其次，我知道那里真的一团糟。随着事情变得越来越复杂，布局这段代码的方式也越来越复杂。话虽如此，这就是我目前的处境。
我使用了三个不同的API链接来收集3个不同状态的数据。1个是搜索结果，另一个是趋势，还有一个即将发布。在我展示了很多有用的数据后，我想添加一个功能，我可以点击任何电影图像，并被带到我可以购买或观看电影的网站上
MovieDatabase APi有另一个链接，但您需要在链接中包含${movieID}。这个链接将为您提供数据，其中包含观看或购买电影的实际链接。我想获得这个链接，并为每部电影设置自己的提供商链接。(该链接将带您进入可以观看或购买电影的网站(。所以我想我应该开始尝试流行电影
要做到这一点，我想我可以进入趋势电影的useEffect调用，并获取为趋势设置的状态，如果电影ID。。。我确实。。。带有趋势。map((项目(=>setMovieId(item.id((；然后我制作了一个名为ProviderLink的新函数，并将movieId作为参数添加到链接中，该链接将为我提供每个电影的ProviderLink。(告诉你在哪里买或看电影的链接(。。。再次，我在链接中获取了带有这个新movieId参数的新链接，我得到了数据，我将其设置为一个新状态，并试图在下面的锚标记中应用该状态，我正在渲染所有电影。我将每个电影列表项封装在<a href={providerLink}></a>中，认为这将为每个电影设置适当的提供者链接。但它不起作用。。。我收到一个错误，告诉我它无法获取，它甚至没有像我需要的那样将ID包括在列表中。如果您需要API密钥来尝试，请告诉我。或者在移动数据库站点停下来，快速获取一个。
import React, {useState, useEffect} from 'react';
const SearchBar = () => {
const [search, setSearch] = useState([]);
const [input, setInput] = useState('');
const [trending, setTrending] = useState([]);
const [upcoming, setUpcoming] = useState([]);
const [providerlink, setProviderlink] = useState('');
const [movieId, setMovieId] = useState([]);
// Input Field
const onUserInput = ({target}) => {
setInput(target.value);
};
// On page load Fetch trending movies
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.log('Error!! Data interupted!:', error)
});
trending.map((item) => setMovieId(item.id));
}, [trending]);
// MovieProviderLink
useEffect(() => {
const url =
`https://api.themoviedb.org/3/movie/${movieId}/watch/providers?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95`;
fetch(url)
.then((res) =>
res.json()
).then((res) =>
setProviderlink(res.results));
//Gives movie ID and adds it to properlink
}, [movieId]);
useEffect(() => {
const upcomingUrl = "https://api.themoviedb.org/3/movie/upcoming?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95";
fetch(upcomingUrl)
.then((response) => response.json())
.then((data) => {
setUpcoming(data.results);
})
.catch((error) => {
console.log('Error!! Data interupted!:', error)
});
});
// Api Call
const SearchApi = (event) => {
const aUrl = "https://api.themoviedb.org/3/search/movie?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95";
const newUrl = aUrl +'&query=' + input;
event.preventDefault();
fetch(newUrl)
.then((response) => response.json())
.then((data) => {
setSearch(data.results);
})
.catch((error) => {
console.log('Error!! Data interupted!:', error)
})
};
return (
// Heading
<div>
<div className="container">
<h1>Movie Search Extravaganza!</h1>
{/* Input Field and Button Form */}
<form onSubmit={SearchApi}>
<input value={input} onChange={onUserInput} type="text" className="searchbar" aria-label="searchbar" placeholder="search" required/>
<br></br>
<button type="submit" aria-label="searchbutton" className="searchBtn">Movie Express Search</button>
</form>
</div>
<div className="byName-container">
<h1 className="row-label" tabIndex="0">Movies Related To Your Search</h1>
<ul className="flexed-search">
{search.map((item) =>
<div className="poster-container" key={item.id}>
<li className="list-item">
<a href="www.google.com" onclick={((event) => {event.preventDefault()})}>
<img className="image-element" tabIndex="0" alt="movie poster" title={`--Title: ${item.title}-- --Description: ${item.overview}-- --Vote Average: ${item.vote_average}`} aria-label={item.title} src={`https://image.tmdb.org/t/p/w500${item.poster_path}`} />
</a>
<h3 className="posterTitle">{item.title}</h3>
</li>
</div>
)}
</ul>
</div>
<div className="trending-container">
<h1 className="row-label" tabIndex="0">This Weeks Trending Tittles</h1>
<ul className="flexed-trending">
{trending.map((it) =>
<div className="poster-container" key={it.id}>
<a href={providerlink}>
<li className="list-item"> <img className="image-element" tabIndex="0" aria-label={it.title} title={`--Title: ${it.title}-- --Description: ${it.overview}-- --Vote Average: ${it.vote_average}`} alt="movie poster" src={`https://image.tmdb.org/t/p/w500${it.poster_path}`} />
<h3 className="posterTitle">{it.title}</h3>
</li>
</a>
</div>
)}
</ul>
</div>
<div className="upcoming-container">
<h1 className="row-label" tabIndex="0">Upcomming Movies</h1>
<ul className="flexed-upcoming">
{upcoming.map((inn) =>
<div className="poster-container" key={inn.id}>
<li className="list-item">
<img className="image-element" tabIndex="0" alt="movie poster" aria-label={inn.title} title={`--Title: ${inn.title}-- --Description: ${inn.overview}-- --Vote Average: ${inn.vote_average}`} src={`https://image.tmdb.org/t/p/w500${inn.poster_path}`} />
<h3 className="posterTitle">{inn.title}</h3>
</li>
</div>
)}
</ul>
</div>
</div>
)
};
export default SearchBar;```
您必须围绕从API调用获得的JSON数组创建一个循环，以显示所需的内容。例如，如果你有一个带有趋势的部分，你可以循环浏览你的趋势JSON数组，并以你想要的结构显示内容。我不知道返回值，但您可能可以执行类似{movie.name}之类的操作。在初始循环中，您可以创建另一个循环，该循环通过提供程序API进行迭代。
糖代码表示法是这样的：
var trendingMoviesContainer = document.querySelector('your_selector_here');
var html = "";
for(let movie in trending_array){
html += '<div ....>{movie.id}</div>';
html += '<div ...>{movie.name}</div>';
//etc...
let providersUrl = "https://api.themoviedb.org/3/movie/{movie.id}/watch/providers?api_key="
// rest of your fetch data logic...
for(let provider in providers_array) {
html += '<div ...>{provider.name}</div>';
html += '<div ...>{provider.link}</div>';
//etc...
}
// inject trending movies structure into container
trendingMoviesContainer.append(html);
}