javascript - 反应项目。使用参数获取数据并获取无限循环时出现问题
问题描述
这个项目有多个问题,这确实给我带来了问题。我现在要发布 API 密钥,以防任何人也需要尝试完成此操作,然后我会从 API 主机请求新的 API 密钥。
所以我的问题是,我调用了一个电影数据库 API,它为我提供了本周 20 部热门电影。我将该数据设置为我称为“趋势”的状态。没问题。然后我绘制了趋势图并列出了电影 ID# 的列表。我将这些保存到一个名为“movieId”的状态。这些 id 很重要,因为我需要它们来最终调用不同的端点。它需要 moviesID 来返回数据,该数据为我提供了指向某人可以购买或观看电影的链接。每个电影 ID 提供者的链接列表是我的主要目标。我需要这些链接,这样我就可以为每部电影分配它的提供者链接,这样用户就可以点击电影图片并被引导到他们可以观看电影的地方。不过,我还不需要做到这一点。现在,我只需要链接。
这是沙箱的链接----> React Sandbox Project
import "./styles.css";
import React, { useEffect, useState } from "react";
export default function App() {
const [trending, setTrending] = useState([]);
const [movieId, setMovieId] = useState("");
const [link, setLink] = useState("");
// set trending to get the movies data.
//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.log("Error!! Data interupted!:", error);
});
}, []);
const Collection = () => {
trending.map((item) => setMovieId(item.id));
};
Collection();
function Linked() {
const url = `https://api.themoviedb.org/3/movie/${movieId}/watch/providers?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95`;
fetch(url)
.then((res) => res.json())
.then((res) => console.log(res.results.US.link));
//Gives movie ID and adds it to properlink
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
```
解决方案
你有一些关于如何在反应中使用这种方法的问题,我将在下面详细介绍:
破坏您的应用程序的第一个问题是您.map
在渲染生命周期中的方法内设置状态,因此您每次都调用以重新渲染您的组件,因此它永远不会停止。如果您需要存储 id 列表,您应该执行以下操作:
首先将movieId状态删除为您不再需要使用它的数组。
const [movieId, setMovieId] = useState("");
然后,您应该修改您的Collection
函数,并通过以下方式使用 map 创建一个变量来存储 id 列表:
const moviesIdCollections = trending.map((item) => (item.id));
现在,您的应用程序将再次运行,并且您的 ids 集合已准备好在您要在组件中使用它的任何地方使用。
现在,如果您想列出每部电影的详细信息,我建议您使用接收电影 id 的 prop 构建另一个组件,然后在 useEffect 挂钩中调用它,如下例所示:
function MovieDetail(props) {
const [movie, setMovie] = useState(null);
const {id} = props;
useEffect(()=>{
getMovieDetail(id)
.then((res) => res.json())
.then((res) => setMovie(res));
}, [id])
return movie ? <code>{JSON.stringify(movie)}</code> : <p>Probably fetching data</p>;
}
我看到您刚刚开始使用 react,因此我建议您阅读文档中的 react 生命周期。以及如何在反应中正确构建组件的反应方式。
https://codesandbox.io/s/blazing-dawn-4w8b2?file=/src/App.js
问候我希望你做得很好。
推荐阅读
- c++ - 查找名称的过程描述
- python - django中大文件的内部服务器错误
- javascript - 异步测试功能
- javascript - fetch() 对 Express.js 的 POST 请求生成空正文 {}
- c# - 使用自动映射器展平对象,但不使用 ForMember 或用于展平的命名约定
- javascript - 粘性或固定覆盖到可滚动 div-JavaScript 的可见区域
- mysql - MySQL:获取逗号分隔列中的数据计数
- powershell - 如何从 Kotlin 运行 PowerShell 脚本?
- css - 为 Select 下拉菜单设置 Flex-basis 时不起作用
- php - WordPress 插件 github-updater 与 Bitbucket webhook 一起使用