Javascript 如何呈现特定来源的文章，防止意外请求过多？

我正在尝试制作一个应用程序，以列表的形式显示新闻来源，每个来源都有一个“头条新闻”链接，该链接将URL带到“/头条新闻”端点。在这个端点上，我想呈现一个特定新闻来源的头条新闻列表

---

App.js

import React，{useState，useffect}来自“React”；
从“/组件/源”导入源；
从“/components/Pagination”导入分页；
从“/components/Headlines”导入标题；
从“axios”导入axios；
从“/API_Key”/”导入{Key}从代码外部导入API密钥。
导入“/App.css”；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Link}；
常量应用=（）=>{
//初始化状态
const[sources，setSources]=useState（[]）；
const[loading，setLoading]=useState（false）；
const[currentPage，setCurrentPage]=useState（1）；
const[sourcesPerPage]=useState（10）；
useffect（（）=>{
//从新闻API获取新闻源
const fetchNews=async（）=>{
设置加载（真）；
const res=等待axios.get(
`http://newsapi.org/v2/sources?apiKey=${Key}`
);
setSources（res.data.sources）；//将新闻源添加到“sources”状态
设置加载（假）；
log（res.data.sources.map（source=>source.id））；
};
fetchNews（）；
}, []);
const indexOfLastSource=currentPage*sourcesPerPage；//获取最后一个源索引
const indexOfFirstSource=indexOfLastSource-sourcesPerPage；//获取第一个源索引
const currentSources=sources.slice（indexOfFirstSource，indexOfLastSource）；//获取当前源
//换页
const paginate=pageNumber=>setCurrentPage（pageNumber）；
返回(
回到源头
来自新闻API的新闻
(
)}
/>
(
)}
/>
);
};
导出默认应用程序；

新闻源作为道具发送到源组件，以呈现源列表。以及标题组件，以访问source.id

---

Sources.js

从“React”导入React；
从“react router dom”导入{Link}；
常量源=（{Sources，loading}）=>{
如果（装载）{
返回加载…；//如果未完成加载，则显示文本“加载…”。
}
/*映射作为道具接收的源，并将其作为列表返回*/
返回(

{sources.map（source=>(

{source.name}
{source.description}

头条新闻

))}

);
};
导出默认源；

news sources数组通过映射而成，该组件返回每个源的一个列表项，其中包含顶部标题的链接

---

标题.js

从“React”导入React；
常量标题=（{标题，正在加载}）=>{
如果（装载）{
返回加载…；//如果未完成加载，则显示文本“加载…”。
}
/*浏览作为道具收到的标题，并将其作为列表返回*/
返回(

{headlines.map（headline=>(

{headline.title}
{headline.description}


))}

);
};
导出默认标题；

在标题组件中，我希望映射第二次调用的标题，并返回特定源的顶部标题列表

例如，如果我单击BBC新闻列表项内的“头条新闻”链接，则“/headlines”端点应仅显示来自BBC的头条新闻

---

问题是，我不知道第二次打电话到哪里才是头条新闻。我试图将它放在标题组件中，然后使用新调用中作为道具的source.id（将其作为变量放在模板字符串中），但这导致了无休止的http请求浪潮，它冻结了我的浏览器一段时间，在我设法停止代码运行后，新闻API用超时阻止了我（请求太多时出现错误429）

---

简而言之，这个想法是：

• 第一页显示源列表，每个列表项都有一个指向顶部标题的链接
• 单击链接后，URL移动到“/headlines”，页面在其中呈现特定源的顶部标题

---

有谁能告诉我，我是否只遗漏了一小片拼图，或者我是否需要对渲染层次结构进行重大重写

当然，我不会在这里给出我的API密钥，所以如果您没有来自NewsAPI的密钥，很遗憾您无法测试它

---

编辑：现在我想起来了，我可以通过链接标题组件将source.id作为道具发送吗

我见过这样的情况：

头条新闻

但是我如何在标题组件中访问它

---

由于我使用的是函数组件，这个.props.location.source无法工作

这有什么钩子吗

---

更新： 我在标题部分添加了以下内容：

const{source}=useParams（）；

但现在我得到一个错误：

React钩子“useParams”是有条件调用的。在每个组件呈现中，React钩子的调用顺序必须完全相同。您是否在提前返回后意外调用了React钩子

---

好的，我用以下方法解决了这个问题：

Sources.js

头条新闻

标题.js

//获取source.id（在S中传递）