我有一個加密硬幣 API，它根據頁碼給出結果。所以我想根據分頁按鈕更改通話中的號碼。數字會更改，但資料不會重新加載。
const [activePage, setActivePage] = useState(8);
const getCoinsData = async () => {
try {
const response = await Axios.get(
`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=100&page=${activePage}&sparkline=true&price_change_percentage=1h,24h,7d`
);
setData(response.data);
setLoading(false);
} catch (e) {
console.log(e);
}
};
useEffect(() => {
getCoinsData();
}, []);
這是分頁結構
<div className="home-pagination">
<div
className={
activePage === 1 ? "pagination-button active" : "pagination-button"
}
onClick={() => setActivePage(1)}
>
1
</div>
<div
className={
activePage === 2 ? "pagination-button active" : "pagination-button"
}
onClick={() => {
setActivePage(2);
}}
>
2
</div>
</div>
如何重新渲染組件，以便根據新頁碼加載新資料。v
uj5u.com熱心網友回復：
每次點擊頁面時，您的狀態都會正確更新。您唯一需要做的就是再次呼叫 API。你可以在 useEffect 中處理它
useEffect(() => {
getCoinsData();
}, [activePage]);
通過添加activePage 作為 useEffect 的依賴項，它將在每次 activePage 更改時呼叫 getCoinsData API
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412531.html
標籤：