如何在 intersection observer React 中获取更新后的状态值？

Question

多年来我一直在努力寻找解决这个问题的方法。如果你有答案，我将不胜感激。我有一个组件，我想在其中使用 Intersection Observer。当某个元素在视口中可见时，将调用该函数来执行某些操作。但问题是，当调用该函数时，您在该函数中没有最新的状态值。让我用代码示例向您展示。

路口观察器

 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]);

当特定元素在视口中可见时调用的函数

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

我们有一个名为 someState 的状态，出于某种原因，该状态得到更新，整个组件重新呈现。只有在 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]);

如何在 intersection observer React 中获取更新后的状态值？

How to get the updated state value in intersection observer React?

javascript

reactjs

intersection-observer

react-hooks