redux 状态在 InterSectionObserver 回调函数中没有更新值

Question

我正在使用 IntersectionObserver api 来实现无限滚动。当回调被调用时，然后在 callback 里面，redux 状态没有更新 value.The 函数是：

//function for defining InfiniteScroll
const InfiniteScroll = (parent,target,options,callback,getObject)=>{
    const Infoptions = {
        root: parent,
        rootMargin: '50px',
        threshold: 1.0,
        ...options
      }
      
      let observer = new IntersectionObserver(callback, Infoptions);
      observer.observe(target);      
      getObject(observer);
      
}


export default InfiniteScroll;

这里用到了这个函数：

//calling InfiniteScroll
    const target = useRef();
    const parent = useRef();
    const observer = useRef();
    const state = useSelector((state)=>state);

    useEffect(() => {
        if(!loading){
            
            InfiniteScroll(parent.current, target.current, {}, callbackScroll, function (obs) {
                observer.current = obs;
            })
        }
        return () => {
            observer.current&&observer.current.disconnect();
        }
    }, [loading])

    const callbackScroll = useCallback((data, observer) => {
        
        if (data[0].isIntersecting) {
            if ((state.post.data[postid]?.hasmorecomments) !== false){
                //if there are more comments ,then this function will call api to fetch comments
                FetchPostComments();
                //here (state.post.data[postid]) returns undefined value,
                //which is the initial value(when component has not mounted),
                //but in some_other function ,it returns updated value
                console.log((state.post.data[postid]));
            }
        }
    },[FetchPostComments])


const some_other = ()=>{
   //here it logs expected value(an object,not undefined)
   console.log(state.post.data[postid]);
}

我想要 callbackScroll 函数中的更新值，就像函数 some_other 一样。我怎样才能实现它？

Edit-1：使用目标的 jsx 代码

//parent is the reference to scrollable div   
return (
     <div ref={parent}>
           <Comments/>
           {//here too, state.post.data[postid] has updated value}
           {((state.post.data[postid]?.hasmorecomments) !== false)&&<Loader/>}
            <div ref={target}></div>
     </div>
)

Answer 1

使用useCallback的目的是避免每次重新渲染父组件或自身时调用不必要的函数，这是通过返回调用的回调函数的记忆版本来实现的仅当依赖数组中的状态或引用值发生变化时。 useCallback 中的函数仅在组件最初使用初始状态值安装时执行一次。因此，它返回 undefined。您希望它在状态更新时再次执行（即在状态更新以包含更多评论时调用该函数）。您可以通过简单地将状态包含在 useCallback 挂钩的依赖项数组中来完成此操作。

const callbackScroll = useCallback((data, observer) => {
        
        if (data[0].isIntersecting) {
            if ((state.post.data[postid]?.hasmorecomments) !== false){
                //if there are more comments ,then this function will call api to fetch comments
                FetchPostComments();
                //here (state.post.data[postid]) returns undefined value,
                //which is the initial value(when component has not mounted),
                //but in some_other function ,it returns updated value
                console.log((state.post.data[postid]));
            }
        }
    },[FetchPostComments,state]) //Include state in dependency array

Answer 2

问题基本上出在 useEffect 和 useCallback

的依赖数组上

useEffect(() => {
        if(!loading){
            
            InfiniteScroll(parent.current, target.current, {}, callbackScroll, function (obs) {
                observer.current = obs;
            })
        }
        return () => {
            observer.current&&observer.current.disconnect();
        }
    }, [loading,parent,target,callbackScroll,observer])

const callbackScroll = useCallback((data, observer) => {
        
        if (data[0].isIntersecting) {
            if ((state.post.data[postid]?.hasmorecomments) !== false){
                //if there are more comments ,then this function will call api to fetch comments
                FetchPostComments();
                //here (state.post.data[postid]) returns undefined value,
                //which is the initial value(when component has not mounted),
                //but in some_other function ,it returns updated value
                console.log((state.post.data[postid]));
            }
        }
    },[FetchPostComments,state]) //Include state in dependency array

redux 状态在 InterSectionObserver 回调函数中没有更新值

redux state doesn't have updated value in InterSectionObserver callback function

javascript

reactjs

react-redux

intersection-observer

redux-toolkit

redux 状态在 In​​terSectionObserver 回调函数中没有更新值

redux state doesn't have updated value in InterSectionObserver callback function

javascript

reactjs

react-redux

intersection-observer

redux-toolkit

redux 状态在 InterSectionObserver 回调函数中没有更新值