#reactjs #api #button #pagination
Вопрос:
Я использую useEffect() для визуализации API статьи, и на одной странице отображаются только 20 из 26 статей. Я пытаюсь применить к нему концепцию разбиения на страницы, но это не дает мне никаких ошибок и тоже не работает. nextPageHandler() отвечает за отображение оставшихся 6 статей на следующей странице.
let articles = []; const [article, setArticle] = useState(articles); const [page, setPage] = useState(1); useEffect(async () =gt; { let url = `https://newsapi.org/v2/top-headlines?q=houseamp;from=2021-10-25amp;sortBy=publishedAtamp;apiKey=abcamp;page=${page}`; let data = await fetch(url); let parsedData = await data.json(); setArticle(parsedData.articles); }, []); const nextPageHandler = async () =gt; { let url = `https://newsapi.org/v2/top-headlines?q=houseamp;from=2021-10-25amp;sortBy=publishedAtamp;apiKey=abcamp;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 () =gt; { let url = `https://newsapi.org/v2/top-headlines?q=houseamp;from=2021-10-25amp;sortBy=publishedAtamp;apiKey=abcamp;page=${setPage( page - 1 )}`; let data = await fetch(url); let parsedData = await data.json(); setArticle(parsedData.articles); setPage(page - 1); console.log("previous"); };
Пожалуйста, поправьте меня, где я ошибаюсь. Спасибо
Ответ №1:
Вам нужно добавить состояние страницы в массив зависимостей useEffect. чтобы вызвать вызов api
useEffect(async () =gt; { let url = `https://newsapi.org/v2/top-headlines?q=houseamp;from=2021-10-25amp;sortBy=publishedAtamp;apiKey=abcamp;page=${page}`; let data = await fetch(url); let parsedData = await data.json(); setArticle(parsedData.articles); }, [page]);
кроме того, вам не нужно снова вызывать api из функции
const nextPageHandler = () =gt; { setPage(page 1); console.log("next"); }; const prevPageHandler = () =gt; { setPage(page - 1); console.log("previous"); };
Комментарии:
1. Попробовал. Это работает! Спасибо
2. если это поможет, отметьте это как ответ, и большой палец вверх будет оценен