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 中定義的位置，而不是使用它的位置。