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会使该父对象重新渲染（您说您称为Dispatch），这也意味着onEnterView函数的引用将更改。结果是您每次调用useLazyLoader钩子时都会得到一个新的onEnterView，因此您所拥有的useCallback几乎没有用处（您每次都会获得不同的依赖关系，因此他会重新创建useCallback结果）。要解决您的问题，请将onEnterView包装在useCallback中，而不是在其中定义。

useCallBack和useEffect无限循环

1 个答案: