這是一個簡單的反應應用程式，它從 nasa api 獲取資料。Div 標簽不斷重新渲染（如無限回圈）是否有任何方法可以在履行承諾后停止 api 獲取。另外我的 arr 正在改變它的值. . 提前致謝。
function App() {
const [arr, setarr] = useState([]);
var promise = new Promise(async(resolve, reject) => {
axios
.get(
"https://api.nasa.gov/planetary/apod?api_key=R4s5xcOxoYklREakJOSoeNMCOK4tpM8iqg6slJ15&count=2&hd=true"
)
.then((res) => {
//res.data[i].hdurl
resolve(res.data);
});
return promise;
});
let show = () => {
promise.then((result) => {
setarr(result);
});
};
//show();
return (
<>
<div className="container">
{arr.map((val, i) => {
return (
<div
id="carouselExampleIndicators"
className="carousel slide"
data-bs-ride="carousel"
>
<div className="carousel-indicators"></div>
<div className="carousel-inner">
<div className="carousel-item active">
<img
src={val.hdurl}
key={i}
className="d-block w-100"
alt="img"
></img>
<br />
</div>
</div>
</div>
);
})}
</div>
</>
);
}
export default App;
uj5u.com熱心網友回復：
您需要將 API 請求放在 useEffect 掛鉤下。最后的空依賴陣列意味著鉤子只會在組件第一次渲染時觸發一次。這是代碼：
import { useEffect } from "react";
const App = () => {
const [arr, setArr] = useState([]);
useEffect(() => {
axios
.get(
"https://api.nasa.gov/planetary/apod?api_key=R4s5xcOxoYklREakJOSoeNMCOK4tpM8iqg6slJ15&count=2&hd=true"
)
.then((res) => {
setArr(res.data);
});
}, []);
return (
<>
<div className="container">
{arr.map((val, index) => {
return (
<div
id="carouselExampleIndicators"
className="carousel slide"
data-bs-ride="carousel"
key={index}
>
<div className="carousel-indicators"></div>
<div className="carousel-inner">
<div className="carousel-item active">
<img
src={val.hdurl}
className="d-block w-100"
alt="img"
></img>
<br />
</div>
</div>
</div>
);
})}
</div>
</>
);
};
export default App;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/428951.html
標籤：javascript 反应 axios es6-承诺