Fetch api太多请求错误在反应

Question

function App(prop) {
const [content, setContent] = useState([]);
const [loading , setLoading] = useState(false);
const fetchUrl = (URl) => {
fetch(URl)
.then((res) => {
return res.json();
})
.then((data) => {   
console.log(data.articles);s
setContent(data.articles);        
setLoading(true);
})
}
fetchUrl(prop.link); 

我认为这是导致太多的请求错误，当我试图使用一个合法的api来获取数据，它发送了太多的请求出于某种原因，并导致429错误，我怎么能修复

return (
<div className="cards">
{!loading && <img src={logo}/>}
{prop.id == 1 && loading &&
content.map((element)=>{
if(element.description && element.urlToImage && element.title)
return <Card image={element.urlToImage} description={element.description.slice(0,150)} title={element.title} key={element.url}/>
})
}
{prop.id == 2 && loading &&
content.map((element)=>{
return <Card image={element.url} description={"Eye color is" + element.eye_color + "Hair color is" + element.hair_color + "and is of age" + element.age} title={element.name} key={element.id}/>
})
}
{
prop.num == 1 && <h1>yo</h1> 
}
</div>
);
}
export default App;

Answer 1

你应该从React的useEffect钩子调用fetchUrl。它首先在加载时执行，如果依赖数组中的任何变量(useEffect的第二个参数)发生变化。你应该这样修改你的代码:

import React, { useEffect } from 'react';
useEffect(()=> {
fetchUrl(prop.link); 
}, [fetchUrl]);

Answer 2

请求应该在React组件挂载后发出。要做到这一点，我们在useEffect hook中发出请求，并且我们确保提供一个空的依赖项数组作为第二个参数，以便我们的请求只发出一次(假设它不依赖于我们组件中的任何其他数据，就像您的情况一样)。

像这样修改你的App组件:

useEffect(()=>{
const fetchUrl = (URl) => {
fetch(URl)
.then((res) => {
return res.json();
})
.then((data) => {   
console.log(data.articles);s
setContent(data.articles);        
setLoading(true);
})
}
fetchUrl(prop.link); 
}, [])

Answer 3

首先，你绝对不能在你的组件内部直接做API请求。如果您这样做，API请求将在每次组件在状态更改时重新呈现时运行。显然，每次App组件重新渲染时，你的取回API都会运行，你会更新取回API中的状态，这又会导致你的App再次重新渲染，再次运行取回API，再次改变状态，App重新渲染因此会出现过多请求错误.

那么你应该把API请求逻辑放在哪里呢?在useEffect(callback, dependencies)钩子内。通过这个钩子，你可以根据你的依赖项

来控制API请求在初始渲染后运行的次数或时间论点。useEffect(callback):每次渲染后运行。
useEffect(callback,[]):在初始渲染后运行一次。
useEffect(callback,[state, prop]):仅在状态时，在初始渲染后和每次渲染后运行一次或变化。

正如你在下面看到的，你有一个空的数组依赖，因此你的请求将在初始渲染后只运行一次。如果你想在状态或道具改变后再次运行它，那么你可以将这些状态或道具添加为依赖项。

useEffect(() => {
const fetchUrl = (URl) => {
fetch(URl)
.then((res) => {
return res.json();
})
.then((data) => {
console.log(data.articles);
s
setContent(data.articles);
setLoading(true);
})
}
fetchUrl(prop.link);
}, []);