Javascript 在const IntersectionObserver中添加带变量的条件

我在开始时添加了以下钩子：

const scrollObserver = useCallback(
    (node) => {
        new IntersectionObserver((entries) => {
            entries.forEach((en) => {
                if (en.intersectionRatio > 0.5) {
                    pagerDispatch({ type: 'ADVANCE_PAGE' }
                }
            })
        }).observe(node)
    },
    [pagerDispatch]
)

useEffect(
    () => {         
        if (bottomBoundaryRef.current) {
            scrollObserver(bottomBoundaryRef.current)
        }
    },
    [scrollObserver, bottomBoundaryRef]
)

我所面临的问题是，我想用随时间更新的变量值添加

if

条件。如果我添加以下代码，则

数据。长度始终为
0
。我猜那是因为它存储了启动时的状态

if (en.intersectionRatio > 0.5) {
    if (data.length <= iScrollMax) {
        pagerDispatch({ type: 'ADVANCE_PAGE' })
    }
}

if（en.intersectionRatio>0.5）{
如果（data.length由于关闭，您在函数中看不到更新的数据值。您的函数仅在
pagerDispatch
上更改时重新创建，因此当数据值更新时，它不会意识到它并继续使用创建时的旧数据值

解决方案是将数据作为依赖项添加到useCallback，并确保在useEffect中清理观察者

const scrollObserver = useCallback(
    (node) => {
        return new IntersectionObserver((entries) => {
            entries.forEach((en) => {
                if (en.intersectionRatio > 0.5) {
                  if (data.length <= iScrollMax) {
                    pagerDispatch({ type: 'ADVANCE_PAGE' }
                  }
                }
            })
        }).observe(node)
    },
    [pagerDispatch, data]
)

useEffect(
    () => { 
        let observer;        
        if (bottomBoundaryRef.current) {
            observer=scrollObserver(bottomBoundaryRef.current)
        }

       return () => {
           observer && observer.disconnect();
       }
    },
    [scrollObserver, bottomBoundaryRef]
)

const scrollObserver=useCallback(
（节点）=>{
返回新的IntersectionObserver（（条目）=>{
条目。forEach（（en）=>{
如果（en.相交比>0.5）{
if（data.length{
让观察者；
if（bottomBoundaryRef.current）{
观察者=滚动观察者（bottomBoundaryRef.current）
}
return（）=>{
观察者（&O.disconnect（）；
}
},
[滚动观察者，bottomBoundaryRef]
)

方法2：通过ref可以逃出去

const dataRef = useRef(data);
useEffect(() => {
   dataRef.current = data;
}, [data]);
const scrollObserver = useCallback(
        (node) => {
            return new IntersectionObserver((entries) => {
                entries.forEach((en) => {
                    if (en.intersectionRatio > 0.5) {
                      if (dataRef.current.length <= iScrollMax) {
                        pagerDispatch({ type: 'ADVANCE_PAGE' }
                      }
                    }
                })
            }).observe(node)
        },
        [pagerDispatch]
    )

    useEffect(
        () => { 
            let observer;        
            if (bottomBoundaryRef.current) {
                observer=scrollObserver(bottomBoundaryRef.current)
            }

           return () => {
               observer && observer.disconnect();
           }
        },
        [scrollObserver, bottomBoundaryRef]
    )

constdataref=useRef（数据）；
useffect（（）=>{
dataRef.current=数据；
}，[数据]；
常量scrollObserver=useCallback(
（节点）=>{
返回新的IntersectionObserver（（条目）=>{
条目。forEach（（en）=>{
如果（en.相交比>0.5）{
如果（dataRef.current.length{
让观察者；
if（bottomBoundaryRef.current）{
观察者=滚动观察者（bottomBoundaryRef.current）
}
return（）=>{
观察者（&O.disconnect（）；
}
},
[滚动观察者，bottomBoundaryRef]
)
为什么不能将另一个useEffect与数组dep一起用作数据和iScrollMax？@DILEEPTHOMAS我不太明白，如果我添加
[pagerDispatch，data]，我也尝试过了
然后这里的问题是，订阅数据会在每次更改时触发它，而我需要它检查一次。我更新了另一种方法，因为您只希望订阅运行一次。但是您必须注意，在方法1中，您必须断开观察者的连接如果（dataRef.current.length只是想让您知道，这是有效的，因为在这里，引用是通过变异而改变的，而不是有一个新的引用
const dataRef = useRef(data);
useEffect(() => {
   dataRef.current = data;
}, [data]);
const scrollObserver = useCallback(
        (node) => {
            return new IntersectionObserver((entries) => {
                entries.forEach((en) => {
                    if (en.intersectionRatio > 0.5) {
                      if (dataRef.current.length <= iScrollMax) {
                        pagerDispatch({ type: 'ADVANCE_PAGE' }
                      }
                    }
                })
            }).observe(node)
        },
        [pagerDispatch]
    )

    useEffect(
        () => { 
            let observer;        
            if (bottomBoundaryRef.current) {
                observer=scrollObserver(bottomBoundaryRef.current)
            }

           return () => {
               observer && observer.disconnect();
           }
        },
        [scrollObserver, bottomBoundaryRef]
    )