如何在交叉点观察者 React 中获取更新的状态值？答案

【问题标题】：How to get the updated state value in intersection observer React?如何在交叉点观察者 React 中获取更新的状态值？
【发布时间】：2021-11-23 13:24:21
【问题描述】：

多年来，我一直在努力寻找解决这个问题的方法。如果您有答案，我将不胜感激。我有一个组件，我想在其中使用 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 中的依赖项，但我陷入了无限循环。请帮我解决这个问题。

【问题讨论】：

标签： javascript reactjs react-hooks intersection-observer

【解决方案1】：

尝试使用useCallback。它应该将实际的someState 保留在handleObserver 中：

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

【讨论】：

成功了。谢谢