Javascript 反应自定义挂钩，计数器不断增加

我正在使用React with hooks，我正在尝试为interaction Observer创建一个自定义挂钩

对于此功能，请单击此处：

因为我想让它被重复使用多次，所以我想把它用于帖子、通信等

以下是我到目前为止得到的信息：

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>
  );
};

使用钩子的父组件：

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>
  );
};

import React，{useRef，useState，useffect}来自'React'；
从“/useObserver”导入useObserver；
常量Posts=（{Posts}）=>{
//启动POST加载程序
const loader=useRef（null）；
const[page]=useObserver（{element:loader}）；
返回(
职位列表
发帖
装载机
);
};

---

我遇到的问题是，useObserver组件内部的状态页面总是得到增量，并被连续多次调用，但当用户滚动到该组件时，应该只调用一次，直到该组件尝试保持一个数组的元素为useEffect

useffect（（）=>{
const observer=新的IntersectionObserver（observerHandler，选项）；
if（当前元素）{
观察者。观察者（元素。电流）；
}
}，[要素]//当您指定一个空数组时，它只运行一次，值为的数组将在值更改时运行

您的“使用效果”没有数组，这意味着它将运行每个渲染。感谢您的快速回答，我们将检查它+1在这里重新启动正确的清理功能非常重要。