Блог

Я использую React с помощью хуков, я пытаюсь создать пользовательский хук для наблюдателя взаимодействия

Для этой функции здесь: бесконечная прокрутка в react

Поскольку я хочу, чтобы он использовался повторно несколько раз, я хочу использовать его для сообщений, комментариев и т. Д

Вот что я получил до сих пор:

Хук useObserver:

 import React, { useState, useEffect } from 'react';

const useObserver = ({ element, callback }) => {
  const [page, setPage] = useState(1);

  console.log('props');
  console.log(page);

  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
  };

  const observerHandler = (entities) => {
    console.log('handle observer');
    const y = entities[0].boundingClientRect.y;
    const target = entities[0];
    if (target.isIntersecting) {
      setPage((counter) => counter   1);
    }
  };

  useEffect(() => {
    const observer = new IntersectionObserver(observerHandler, options);
    if (element.current) {
      observer.observe(element.current);
    }
  });

  return [1];
};

export default useObserver;
  

Родительский компонент, в котором я использую хук:

 import React, { useRef, useState, useEffect } from 'react';
import useObserver from './useObserver';


const Posts = ({ posts }) => {
  // initiate posts loader
  const loader = useRef(null);

  const [page] = useObserver({ element: loader }); 


  return (
    <div id="post-list">
      <h1> Post list </h1>
      <div class="test" ></div>
      <h1>Show posts</h1>
      <div className="loading" ref={loader}>
        <h1>Loader</h1>
      </div>
    </div>
  );
};
  

Проблема, с которой я сталкиваюсь, заключается в том, что страница состояния внутри компонента useObserver всегда получает приращение и постоянно вызывается многократно, но ее следует вызывать только один раз, когда пользователь прокручивает до этого компонента

попробуйте сохранить массив с элементом в useEffect

 useEffect(() => {
    const observer = new IntersectionObserver(observerHandler, options);
    if (element.current) {
      observer.observe(element.current);
    }
  },[element]); //when you specify an empty array it runs only once, an array with value will run when ever the value changes