infinite scroll React.js - intersection observer typescript

Question

Próbuję napisać infinite scroll w React i typeScript. Komponent jest ogólnie długi więc wkleje tylko najważniejsze rzeczy.

Póki co próbuję osiągnąć stan, w którym konsola wypisywałaby mi cokolwiek, jeśli tylko <ClipLoader /> pojawi się na ekranie użytkownika. Oczywiście ponad nim są rzeczy tylko tutaj je wyciąłem, aby wyrzucić zbędny kod.
Na chwilę obecną typeScript wyrzuca mi taki błąd :
 

Argument of type 'null' is not assignable to parameter of type 'Element'.ts(2345)

w liniach :
 

    if (loader && loader.current) observer.observe(loader.current);

[...]

      if (loader.current) observer.unobserve(loader.current);

Podkreślone są load.current jako argumenty do observer.observe/unobserve...
 

  const loader = useRef(null);

  const loadMore = useCallback((entries) => {
    console.log(entries);
    if (entries[0].isIntersecting) console.log(entries[0].isIntersecting);
  }, []);

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 0.1,
    };

    const observer = new IntersectionObserver(loadMore, options);

    if (loader && loader.current) observer.observe(loader.current);

    return () => {
      if (loader.current) observer.unobserve(loader.current);
    };
  });

[...]

return (
[...]

      {!loading && <ClipLoader ref={loader} color={"#276a39"} />}
)

 

Answer 1

Pokaż proszę co rzuci do konsoli console.log(loader) wstawiony gdzieś na początku callbacka do useEffect.

Komponent ClipLoader jest tworzony w zależności od wartości zmiennej loading, a useEffect odpala callback (z m.in. IntersectionObserverem) przy każdym renderze komponentu (nie ograniczyłeś tego drugim parametrem), w którym się znajduje - możliwe, że to się dzieje zanim komponent ClipLoader będzie utworzony i przypisze referencję do loader. Obstawiam, że stąd bierze się błąd, że property loader.current jest null-em.

Inna rzecz, że React zdaje się nie obsługiwać ref na funkcyjnych komponentach, więc jeśli ClipLoader takim jest, to użyj forwardRef.

Comments

Error wygląda następująco:
 

Argument of type 'null' is not assignable to parameter of type 'Element'.  TS2345

Poprawiłem trochę kod.

ClipLoader'a wrzuciłem w takiego diva:
 

      <div ref={loader}>{loading && <ClipLoader color={"#276a39"} />}</div>

i dodałem do tablicy warunków wykonania useEffect loader i loadMore:
 

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 0.1,
    };

    const observer = new IntersectionObserver(loadMore, options);

    if (loader && loader.current) observer.observe(loader.current);

    return () => {
      if (loader.current) observer.unobserve(loader.current);
    };
  }, [loader, loadMore]);

 

I jest progres, ponieważ nawet na stronie z errorem jeśli scrolluje w dół i dojadę do końca strony wykonuje się funkcja:
 

  const loadMore = useCallback((entries) => {
    console.log(entries);
    if (entries[0].isIntersecting) console.log(entries[0].isIntersecting);
  }, []);

Jednak sam error, o którym napisałem na początku wciąż się pojawia.

---

Error wygląda następująco:

Pytałem o log z konsoli przeglądarki, ale jak rozumiem apka się nie buduje przez błąd kompilacji TS'a.

Spróbuj tworząc zmienną loader nadać typ HTMLDivElement dla wywołania useRef - tutaj jest przykład: https://linguinecode.com/post/how-to-use-react-useref-with-typescript#useref-examples

Ewentualnie w miejscu, gdzie TS rzuca błąd użyj operatora as -> loader.current as Element - co da znać TS'owi, że ma do czynienia z elementem HTML a nie nullem.

Niewykluczone, że będziesz musiał wspomniane typy zaimportować do komponentu, aby móc ich używać.

---

HTMLDivElement dla loadera załatwiło sprawę. 

---

Mam jeszcze pytanie odnośnie IntersectionObserver, ponieważ na wersji dekstopwej aplikacji, mam zamiar taki infinity scroll zrobić w kilku miejscach i będą one czasami dostępne jednocześnie. Np. posty na stronie głównej i powiadomienią po otwarciu DropMenu z powiadomieniami, a z tego co się domyślam w funkcji callback IntersectionObserver dostaję tablicę - entries, w której pewnie mam wszystkie divy, które akutalnie obserwuje. One są w jakiś sposób rozpoznawalne ? Bo na wszystkich przykładach jakie obejrzałem ludzie po prostu biorą entries[0] i na niej działają...

---

z tego co się domyślam w funkcji callback IntersectionObserver dostaję tablicę - entries, w której pewnie mam wszystkie divy, które akutalnie obserwuje. One są w jakiś sposób rozpoznawalne ?

Nie do końca. W callbacku, pierwszy parametr - entries - jest tablicą wpisów odnoszących się do obserwowanych elementów, na których API odnotowało zmianę w intersekcji. Każdy wpis w tablicy jest obiektem zawierającym m.in. property target, które jest referencją do elementu w DOM. Jeśli więc Twoje obserwowane elementy mają charakterystyczne atrybuty, typu id lub klasa, to powinno się dać te elementy bez problemu zidentyfikować.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Targeting_an_element_to_be_observed