useCallBack 和 useEffect 无限循环

Question

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

Answer 1

无限循环的最可能原因是 onEnterView。为了确定这就是原因，请告诉我们该函数是在哪里创建的。我认为发生的情况（我对此有 99.99% 的把握）是您在某个父级中创建了一个箭头函数（没有将其包装在 useCallback 中）。调用 onEnterView 会使父级重新渲染（你说你调用了调度），这也意味着 onEnterView 函数的引用将会改变。结果是每次调用 useLazyLoader 钩子时都会得到一个新的 onEnterView，因此你在那里的 useCallback 几乎没有用（每次都会得到不同的依赖项，因此他重新创建了 useCallback 结果）。要解决您的问题，请将 onEnterView 包装在定义的 useCallback 中，而不是使用它的位置。