如何使用React限制API的请求量

Question

我是一名学生，我们刚刚开始研究API，使用https://openweathermap.orgAPI我试图得到瑞典斯德哥尔摩的预报。没有走多远，因为出于某种原因，我发送了很多请求，这阻止了我发送更多请求。但不知道是什么原因造成的。

非常感谢反馈/解释我做错了什么，并且可以改进。提前感谢！

这是我迄今为止所做的全部工作，并将<InitialContainer>放置在函数应用程序((中

import {useState} from 'react';
const InitialForecast = () =>{
const[initial, setInital] = useState();
let url = "https://api.openweathermap.org/data/2.5/weather?q=Stockholm&appid=MyID";
fetch(url).then(res => res.json()).then(data =>{
setInital(data);
// console.log(data.name);

})
return(<>
<h2>{initial.name}</h2>       
</>)
}
export default InitialForecast;

Answer 1

当组件第一次渲染时，获取数据并使用setInitial(data)，这将导致组件的重新渲染。当组件被重新渲染时，您将再次获取API，并再次使用setInitial(data)，依此类推。

当组件第一次呈现时，您需要做的是将fetch语句放入没有依赖关系的useEffect挂钩中，如

const [initial, setInital] = useState();
useEffect(() => {
let url = "https://api.openweathermap.org/data/2.5/weather?q=Stockholm&appid=MyID";
fetch(url).then(res => res.json()).then(data =>{
setInital(data);  
})
}, [])
...

Answer 2

您的代码问题在于组件在更新data变量后立即重新呈现。尝试将请求放入useEffect()-钩子中。

组件渲染完成后，useEffect Hook将运行。任何状态更改都不会再次重新呈现dom->无获取循环。

您可以在react文档中阅读更多关于useEffect如何工作的信息。

对于Ctrl+C/Ctrl+V操作，您可以使用以下代码段：

import {useState, useEffect} from 'react';
const InitialForecast = () =>{
const[initial, setInital] = useState();
let url = "https://api.openweathermap.org/data/2.5/weather?q=Stockholm&appid=MyID";

useEffect(()=>
fetch(url).then(res => res.json()).then(data =>{
setInital(data);
}), [])
return(<>
<h2>{initial.name}</h2>       
</>)
}
export default InitialForecast;
```

Answer 3

您所做的完全是错误的。您不能直接在react组件内部调用API和setState钩子，这将创建无限循环，在您的第一次API成功时，它将设置setInital(data);，这将再次呈现组件，并再次调用您的API

解决方案

import {useState, useEffect} from 'react';
const InitialForecast = () =>{
const[initial, setInital] = useState();
const getIntialData = () => {
let url = "https://api.openweathermap.org/data/2.5/weather?q=Stockholm&appid=MyID";
fetch(url).then(res => res.json()).then(data => {
setInital(data);
})
}
useEffect(()=> {
getIntialData()
}, [])
return(<>
<h2>{initial.name}</h2>       
</>)
}
export default InitialForecast;

第二个参数中有空数组的useEffect只会在类似componentWillMount 的组件的第一次呈现时调用