redux state 在 InterSectionObserver 回調 function 中沒有更新值

Question

我正在使用IntersectionObserver api 來實現無限滾動。 調用回調時，則在callback內部，redux state 沒有更新值。函數是：

//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;

這個 function 用在這里：

//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 function 中的更新值，就像 function 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

The purpose of using a useCallback is to avoid unnecessary function invocation every time when a parent component or self is re-rendered, this is achieved by returning a memorized version of the callback function, that is invoked only when the state or reference value in the依賴數組改變。 當使用初始 state 值初始安裝組件時，useCallback 中的useCallback僅執行一次。 因此，它返回undefined 。 當 state 更新時，您希望它再次執行（即在這種情況下，當 state 更新以包含更多注釋時調用 function）。 您只需將 state 包含在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