Блог

Я использую 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");  };  

Пожалуйста, поправьте меня, где я ошибаюсь. Спасибо

Вам нужно добавить состояние страницы в массив зависимостей 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");  };