在 useEffect 鈎子上獲取無限循環

Question

試圖構建一個工具提示組件。 當工具提示從視口移開時，需要切換工作正常的工具提示 position。 但是當工具提示遠離視口時，useEffect 會無限運行。 無法找到根本原因。

添加沙箱鏈接https://codesandbox.io/s/dbpkr

Answer 1

嘗試使用依賴數組

useEffect(() => {;
    let intersectionObserver = new IntersectionObserver(function (entries) {
      if (!entries[0].isIntersecting) {
        setMoveBottom(!moveBottom);
      }
    });

    if (refElement) intersectionObserver.observe(refElement);

    return () => {
      if (refElement) intersectionObserver.unobserve(refElement);
    };
  }, [setMoveBottom, moveBottom, refElement]);

Answer 2

是的，因為您沒有傳遞 useEffect 掛鈎的依賴項。

因此，在 useEffect 末尾添加空數組或傳遞任何依賴項

例如：

 useEffect(() => {


}, [])

有關更多信息，請閱讀此處在此處輸入鏈接描述