Блог

Я хотел бы сделать бесконечную прокрутку с наблюдателем пересечения, который в функции обратного вызова увеличивает номер страницы из API и отображает другое изображение.

Я застрял на том, как я могу снова вызвать API и увеличить страницу.

Это то, что я пытался:

 const [page, setPage] = useState(1);  const [images, setImages] = useState(null);  const lastItem = useRef(null);   useEffect(() =gt; {  const intersection = new IntersectionObserver(() =gt; {  // setPage(page   1);  });   if (lastItem.current) {  intersection.observe(lastItem.current);  }     });   useEffect(() =gt; {  async function dataSet() {  const data = await fetch(`https://api.themoviedb.org/3/trending/movie/week?api_key=${apiKey}amp;page=${page}`).then((res) =gt; res.json());  setImages(data);  }  dataSet();  }, [apiKey, page]);   useEffect(() =gt; {});   if (!images) {  return lt;h2gt;Loading...lt;/h2gt;;  }   return (  lt;gt;  lt;Nav /gt;  lt;maingt;  lt;section className={styles.spacer}gt;  lt;h1gt;Trending Movieslt;/h1gt;  lt;ul className={styles.grid}gt;  {images.results?.map((image) =gt; {  return (  lt;li className={styles.gridItem} key={image.id} ref={lastItem}gt;  lt;img src={`https://image.tmdb.org/t/p/w370_and_h556_bestv2/${image.poster_path}`} alt={image.name} /gt;  lt;p className={styles.title}gt;{image.original_title}lt;/pgt;  lt;/ligt;  );  })}  lt;/ulgt;  lt;/sectiongt;  lt;/maingt;  lt;Footer /gt;  lt;/gt;  ); }