[英]redux state doesn't have updated value in InterSectionObserver callback function
I am using IntersectionObserver
api for implementing infinite scroll.我正在使用
IntersectionObserver
api 来实现无限滚动。 When callback is called,then inside the callback
,redux state does not have updated value.The functions are:调用回调时,则在
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;
This function is used here:这个 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]);
}
I want the updated value inside callbackScroll
function just like the function some_other
.我想要
callbackScroll
function 中的更新值,就像 function some_other
。 How may i achieve it?我怎样才能实现它?
Edit-1: jsx code where target is being used 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>
)
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 dependency array change. 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依赖数组改变。 The function inside the useCallback
is executed only once when the component is initially mounted with initial state values.当使用初始 state 值初始安装组件时,useCallback 中的
useCallback
仅执行一次。 Hence, it is returning undefined
.因此,它返回
undefined
。 You'd want it to execute again when the state is updated (ie invoke the function when the state is updated to contain more comments in this case).当 state 更新时,您希望它再次执行(即在这种情况下,当 state 更新以包含更多注释时调用 function)。 You can accomplish this by simply including the state in the dependency array of your
useCallback
hook.您只需将 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
The problem was basically with dependency array of useEffect
and useCallback
问题基本上在于
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.