如何在交叉點觀察者 React 中獲取更新的 state 值？

Question

多年來，我一直在努力尋找解決這個問題的方法。 如果您有答案，我將不勝感激。 我有一個組件，我想在其中使用 Intersection Observer。 當某個元素在視口中可見時，將調用 function 來執行某些操作。 但問題是，當調用 function 時，您在 function 中沒有最新的 state 值。 讓我通過代碼示例向您展示。

路口觀察員

 const [someState,setSomeState] =useState(someVal)

 useEffect(() => {
    if (!isInfinite || !infiniteLoadingRef || !infiniteLoadingRef.current)
      return;
    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 0,
    };
    const observer = new IntersectionObserver(handleObserver, options);
    observer.observe(infiniteLoadingRef.current);
  }, [infiniteLoadingRef]);

當某個元素在視口中可見時調用的 function

 const handleObserver = (entries: any, observer: any) => {
    if (entries[0].isIntersecting) {
      console.log(someState);
    }
  };

我們有一個名為someState的 state ，出於某種原因，state 得到更新，整個組件重新渲染。 只有在someState值改變后，handleObserver 才會被調用。 我在該 handleObserver 中使用 someState ，但沒有獲得最新狀態的值。 如何在 handleObserver 中獲取最新的 someState 值？ 我嘗試將someState作為依賴項放在我的useEffect中，但我陷入了無限循環。 請幫我解決這個問題。

Answer 1

嘗試使用useCallback 。 它應該將實際的someState保留在handleObserver ：

const handleObserver = useCallback((entries: any, observer: any) => {
  if (entries[0].isIntersecting) {
    console.log(someState);
  }
}, [someState]);