根据下面的代码,只要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