Kuasai Tatal Tak Terhingga dalam Langkah Mudah

Tatal Tak Terhingga

Kami boleh melaksanakan penatalan tanpa had menggunakan API IntersectionObserver yang diberikan oleh penyemak imbas.
Untuk melaksanakan kita boleh ikuti langkah berikut :-

1. Kami boleh menggunakan API olok-olok untuk tatal tak terhingga kami dan kemudian mencipta cangkuk tersuai
2. Kail tersuai ini dengan mengambil parameter API sebagai parameter fungsinya sendiri.
3. Kemudian kita boleh melaksanakan hanya panggilan API, menggunakan useEffect dan aksios, menghantar parameter daripada parameter berfungsi.
4. Kami boleh mempunyai pemuatan, ralat, hasMore dan data sebagai keadaan
5. Kami kemudiannya juga boleh menggunakan setTimeout supaya kami boleh menyemak pemuatan serta penatalan infinte dengan betul
6. hasMore akan bersamaan dengan panjang tatasusunan data yang kami paparkan pada masa ini dalam halaman berbanding dengan apa yang kami dapat daripada panggilan api
7. Lagi ini ada untuk mengelakkan panggilan walaupun kami telah sampai ke penghujung data kami.
8. Setelah cangkuk tersuai hadir di halaman utama kami, kami akan mencipta keadaan parameter yang kami lalui
9. Kemudian kami akan menghantar parameter ke cangkuk tersuai kami dan mendapatkan semula data
10. Senarai data yang kami dapat kami akan tunjukkan menggunakan peta dan kemudian memaparkannya
11. Sekarang kita perlu menggunakan tatal infinte sebaik sahaja kita mencapai penghujung jadi untuk data elemen terakhir tatasusunan yang kita terima, kita hanya akan menambah ref
12. Ruj ini akan bersamaan dengan fungsi useCallback, yang parameternya ialah elemen terakhir ini.
13. Seterusnya kami akan mencipta useRef yang nilainya akan menjadi nol lalai
14. Sekarang kami akan menyemak sama ada kami dalam keadaan memuatkan atau tidak. Jika ya kami hanya akan kembali
15. Seterusnya kami akan menyemak sama ada nilai semasa useRef ini adalah batal atau tidak. Jika tidak batal, kami hanya akan memutuskan sambungan pemerhati ini. Idea di sini ialah pemerhati harus baharu setiap kali, kerana setiap kali kami akan mempunyai data baharu
16. Sekarang kami akan menetapkan nilai pemerhati. semasa fungsi panggil balik baharu ini oleh IntersectionObserver baharu. API IntersectionObserver akan mengembalikan fungsi panggil balik, dengan entri sebagai parameter.
17. Entri ini pada asasnya adalah nilai elemen terakhir kami apabila ia berada dalam halaman. Kami mahukan syarat apabila kami akan berinteraksi dengan entri ini dalam halaman
18. Jadi kami mempunyai nilai boolean untuk setiap entri. sedang bersilang
19. Apabila ini benar, kami akan mengubah parameter cangkuk tersuai. Ini akan mengubah panggilan api sekali lagi dan membuat juga sekali lagi
20. Akhir sekali kita perlu memerhati elemen yang telah kita hantar dalam panggilan balik, jadi jika kita mempunyai elemen itu, kita hanya akan memerhatikannya.

Kod

CustomHook.jsx

import axios from "axios";
import { useEffect, useState } from "react";
import { API_URL } from "../common/constants";

export const useAuthorList = (limit, page) => {
  const [isLoading, setIsLoading] = useState(false);
  const [authorList, setAuthorList] = useState([]);
  const [error, setError] = useState("");
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    setIsLoading(true);
    setTimeout(() => {
      axios({
        method: "GET",
        url: API_URL,
        params: { limit: limit, page: page },
      })
        .then((res) => {
          setAuthorList(res.data.data);
          setHasMore(res.data.data.length === limit);
          setIsLoading(false);
        })
        .catch((e) => setError(e));
    }, 500);
  }, [limit, page]);

  return [isLoading, authorList, error, hasMore];
};

App.jsx

import React, { useCallback, useRef, useState } from "react";
import { useAuthorList } from "./hooks/useAuthorList";
import { AuthorQuotes } from "./components/AuthorQuotes";

const App = () => {
  const [limit, setLimit] = useState(10);
  const [page, setPage] = useState(1);
  const [isLoading, authorList, error, hasMore] = useAuthorList(limit, page);

  const observer = useRef(null);
  const infiniteReference = useCallback(
    (element) => {
      if (isLoading) return;
      if (observer.current) {
        observer.current.disconnect();
      }

      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          setLimit((prev) => prev + 10);
        }
      });

      if (element) {
        observer.current.observe(element);
      }
    },
    [isLoading, hasMore]
  );

  return (
    <div className="author-quotes-list">
      {authorList.length > 0 &&
        authorList.map((authorQuotes, index) => {
          if (index + 1 === authorList.length) {
            return (
              <AuthorQuotes
                authorQuotes={authorQuotes}
                hasReference
                infiniteReference={infiniteReference}
              />
            );
          }
          return <AuthorQuotes authorQuotes={authorQuotes} />;
        })}
      {isLoading && <>Loading...</>}
    </div>
  );
};

export default App;

constant.js

export const API_URL = "https://api.javascripttutorial.net/v1/quotes/"

Atas ialah kandungan terperinci Kuasai Tatal Tak Terhingga dalam Langkah Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!