reactjs - useCallBack 和 useEffect 无限循环
问题描述
根据下面的代码,我需要在任何时候调用一个函数inView
,但是使用 useEffect
并useCallback
列出依赖项,我会导致一个无限循环。我设法避免它的唯一方法是不列出依赖项,但我收到警告说我必须列出它们。我只尝试了useEffect
,但结果是一样的,列出了依赖项,我的循环有问题。这是代码:
import { useEffect, useCallback } from "react";
import { useInView } from "react-intersection-observer";
export const useLazyLoader = (onEnterView: () => void) => {
const [ref, inView] = useInView({
triggerOnce: true,
rootMargin: "-200px",
});
const innerEnterView = useCallback(() => {
onEnterView();
}, [onEnterView]);
useEffect(() => {
inView && innerEnterView();
}, [inView, innerEnterView]);
return ref;
};
在此示例中,如果我删除任何依赖项以试图避免该问题,我最终会收到如下警告:
Line 16:6: React Hook useEffect has a missing dependency: 'innerEnterView'. Either include it or remove the dependency array react-hooks/exhaustive-deps
解决方案
无限循环的最可能原因是 onEnterView。为确保这是原因,请告诉我们该函数的创建位置。我认为会发生什么(我对此有 99.99% 的把握)是您在某个父级中创建了一个箭头函数(没有将其包装在 useCallback 中)。调用 onEnterView 会使父级重新渲染(你说你调用了 dispatch),这也意味着 onEnterView 函数的引用将会改变。结果是每次调用 useLazyLoader 钩子时都会得到一个新的 onEnterView,所以你在那里的 useCallback 几乎没有用(你每次都会得到不同的依赖,所以他重新创建了 useCallback 结果)。要解决您的问题,请将 onEnterView 包装在 useCallback 定义的位置,而不是使用它的位置。
推荐阅读
- javascript - 如何使用 emscripten 构建大型 C++ 库?
- github-pages - 如何让 GitHub 页面为我的 www 子域提供正确的 SSL 证书
- field - 字段表单的附加字段,D8
- java - 为什么 getWindow() 说它找不到符号?
- c++ - 如何围绕std :: move构建unique_ptrs的二叉树?
- scikit-learn - sklearn 线性回归:如何在预测器中同时拟合单热编码变量和数值变量?
- java - Spring Redis Stream 消费者停止消费消息(地址已在使用中)
- json - 撤销、无效、删除或授权注销以使用户在受保护的护照 api 中注销是否正确
- css - 如何在引导程序中输入输入类型的全宽
- sql - 在 plpgsql 函数中访问 select 语句结果