我正在使用 useEffect() 來呈現文章 API，并且在一頁上僅顯示了 26 篇文章中的 20 篇。我正在嘗試將分頁概念應用于它，但它沒有給我任何錯誤并且它也不起作用。nextPageHandler() 負責在下一頁顯示剩余的 6 篇文章。
let articles = [];
const [article, setArticle] = useState(articles);
const [page, setPage] = useState(1);
useEffect(async () => {
let url =
`https://newsapi.org/v2/top-headlines?q=house&from=2021-10-25&sortBy=publishedAt&apiKey=abc&page=${page}`;
let data = await fetch(url);
let parsedData = await data.json();
setArticle(parsedData.articles);
}, []);
const nextPageHandler = async () => {
let url = `https://newsapi.org/v2/top-headlines?q=house&from=2021-10-25&sortBy=publishedAt&apiKey=abc&page=${setPage(page 1)}`;
let data = await fetch(url);
let parsedData = await data.json();
setArticle(parsedData.articles);
setPage(page 1);
console.log("next");
};
const prevPageHandler = async () => {
let url = `https://newsapi.org/v2/top-headlines?q=house&from=2021-10-25&sortBy=publishedAt&apiKey=abc&page=${setPage(
page - 1
)}`;
let data = await fetch(url);
let parsedData = await data.json();
setArticle(parsedData.articles);
setPage(page - 1);
console.log("previous");
};
請糾正我的錯誤。謝謝
uj5u.com熱心網友回復：
您需要在 useEffect 依賴陣列中添加頁面狀態。觸發api呼叫
useEffect(async () => {
let url =
`https://newsapi.org/v2/top-headlines?q=house&from=2021-10-25&sortBy=publishedAt&apiKey=abc&page=${page}`;
let data = await fetch(url);
let parsedData = await data.json();
setArticle(parsedData.articles);
}, [page]);
你也不需要再次從函式呼叫 api
const nextPageHandler = () => {
setPage(page 1);
console.log("next");
};
const prevPageHandler = () => {
setPage(page - 1);
console.log("previous");
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/366425.html