Reactjs 组件安装后调用自定义钩子

//At first I fetch data from external API
const lastElement = useRef();

useObserver(lastElement, callback, dependecies)

return (
<section>
{here is mapping of data}
 {!loading && !isSearched && limit <= data.length && (
          <div ref={lastElement}><Loader/></div>
 )}
</section>

export default function useObserver(ref, callback, dependecies) {
    const observer = useRef();

    useEffect(() => {
       function observerCallback(entries) {
           if(entries[0].isIntersecting) {
              callback()
           }
       }
   
      observer.current = new IntersectionObserver(observerCallback);
      observer.current.observe(ref?.current);
   
      return () => {
        observer.current.disconnect();
      }
     }, [dependecies])
}

return (
  <section>
    {here is mapping of data}
    <div ref={lastElement}>
      {!loading && !isSearched && limit <= data.length && (
        <Loader/>
      )}
    </div>
  </section>
)

export default function useObserver(ref, callback, dependecies) {
  // ...
  useEffect(() => {
    if (!ref.current) return // no action taken & no cleanup callback
    // ...
  }, [dependecies])
}

Reactjs相关问答推荐

为什么我无法访问窗口事件处理程序中的状态？

如何在React中的textarea中显示字符数？

Reaction Axios多部分/表单-数据数组不工作

REACTJS：在Reaction中根据路由路径更改加载器API URL

获取点击的国家/地区名称react 映射

MUiv5和TSS-Reaction SSR问题：无法可靠地处理样式定义.CSSprops 中的ArrowFunctionExpression

在transformResponse中使用来自其他查询的缓存

在迭代状态时无法读取未定义的属性(读取 map )

如何获取用户在 GooglePlacesAutocomplete 中输入的文本？

使用以Jest 的方式返回 Promise 的方法来模拟可构造的 API 类时出现问题

Redux 工具包不更新状态

REACT： UseState 没有更新变量(ant design 模态形式)

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗？

在添加了useplacesautocomplete后，在构建React/Next.js项目时，NPM抛出类型期望的错误

如何将 DocuSign 控制台界面嵌入到 React 应用中

字段是必需的，当它没有定义时

如何在 React 中使用 debounce hooks

将复杂状态和 setState 传递给更简单的 api

如何在 MUI 数据网格中的 renderCell 组件之间传递状态

Cypress - 在继续之前等待下一个按钮重新出现