时间戳

首页 > 解决方案 > 反应自定义钩子，计数器不断增加

javascript - 反应自定义钩子，计数器不断增加

问题描述

我正在使用带有钩子的 React，我正在尝试为交互观察者创建一个自定义钩子

对于此功能：Infinite Scroll in react

因为我想让它被多次重复使用，所以我想用它来发帖、评论等

这是我到目前为止得到的：

使用观察者钩子：

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 组件内部的状态页面总是增加并被连续调用多次，但是当用户滚动到该组件时它应该只调用一次

标签： javascriptreactjs

解决方案

尝试在 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

推荐阅读