useCallBack和useEffect无限循环

Question

根据下面的代码，每当inView为true时，我都需要调用一个函数，但是使用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

Answer 1

无限循环最可能的原因是onEnterView。为了确保这是原因，请告诉我们该函数是在哪里创建的。我认为它会发生的(我99.99%确定)是你在某个父类中创建了一个箭头函数(没有将其包装在useCallback中)。调用onEnterView会使父函数重新呈现(您说过调用了dispatch)，这也意味着onEnterView函数的引用将发生变化。其结果是每次调用useLazyLoader onEnterView时都会得到一个新的钩子，因此您在那里拥有的useCallback几乎是无用的(您每次都会得到一个不同的依赖项，所以它会重新创建useCallback结果)。要解决您的问题，请将onEnterView包装在定义位置的useCallback中，而不是使用它的位置。