我是一名學生，我們剛剛開始研究 API，使用https://openweathermap.org API 我試圖獲取瑞典斯德哥爾摩的預報。沒有走得很遠，因為出于某種原因，我發送了很多請求，這阻止了我發送更多請求。而且真的不知道是什么原因造成的。
非常感謝反饋/解釋我做錯了什么并且可以改進。提前致謝！
這就是我到目前為止所做的一切，并放在<InitialContainer>函式 App() 中
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;
uj5u.com熱心網友回復：
當組件第一次渲染時，您獲取資料并使用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);
})
}, [])
...
uj5u.com熱心網友回復：
data您的代碼問題是您的組件在更新變數后立即重新渲染。嘗試將請求放入useEffect()-Hook。
useEffect-Hook在組件完成渲染后運行。任何狀態更改都不會再次重新渲染 dom -> 沒有 fetch-loop。
您可以在react docs中閱讀有關 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;
```
uj5u.com熱心網友回復：
你在做什么是完全錯誤的。您不能直接在反應組件內呼叫 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 的組件的第一次渲染時呼叫
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/455078.html