score:0
this is a react query useinfinitequery()
example, assuming you have:
data: {
pages: [
{/*a page*/
results:[
{/*an item*/
/*...*/
}
]
}
]
}
set your datalength
this way:
const {issuccess,
isloading,
iserror,
data,
error,
hasnextpage,
fetchnextpage,
isfetchingnextpage
} = useinfinitequery(
path /*your query path here*/,
fetchfn /*your fetch function here*/);
return <div>
{iserror && <div>error! {error?.message}</div>}
{isloading && <div>loading...</div>}
{issuccess && data?.pages && (
<div>
<listheader isfetching={isfetchingnextpage} data={data}/>
<infinitescroll
datalength={data.pages.reduce((acc, page) => acc + page.results.length, 0)}
next={fetchnextpage}
hasmore={hasnextpage}
loader={<div>loading...</div>}
endmessage={<p>- you have seen it all -</p>}
>
{data.pages.map((page, i)=> (
<fragment key={i+''}>
{page.results.map((item, j)=> (
<listitem key={i+'.'+j} path={path} item={item}/>
))}
</fragment>
))}
</infinitescroll>
</div>
)}
</div>
where listheader and listitem are components of your own.
score:20
i had this issue. it turns out i was using datalength in the wrong way. i thought it was supposed to be the total length of items that could be displayed, but instead, it seems it should be the length of items that are currently displayed, so the correct way is should be something like this:
<infinitescroll
datalength={page * 10}
pulldowntorefreshthreshold={50}
next={loadmoreconversation}
scrollabletarget="scrollablediv"
hasmore={true}
loader={<h4>loading...</h4>}
>
<chatitemlist
chatitems={chatitems}
isindeletemode={deleteactive}
onbottomdrawerhandler={onbottomdrawerhandler}
/>
</infinitescroll>
in this case, i load 10 items per page. i hope this helps you because i searched a lot and did not find an answer until i reached it with all the effort and error.
Source: stackoverflow.com
Related Query
- “react-infinite-scroll-component” Stopped working after one call (loadMore only gets called once)
- Infinite Scroll React component only loading one new slice of objects on scroll down and then stops
- React infinite scroll component - dataLength not working
- React component function call only updates one component instance
- How can I ensure that a React component is loaded only after some API call has been made?
- allow typescript compiler to call setState on only one react state property
- Adding border only to the one side of the <Text/> component in React Native (iOS)
- How to implement a React infinite scroll component for a chat app like Facebook Messenger?
- Avoid rerendering every component in list while updating only one in React
- How to make a React component fade in on scroll using IntersectionObserver, but only once?
- how and when to call a react component methods after state change from redux
- react component state change after ajax call but does not rerender component
- Does React render the WHOLE component if only one part of the component changed?
- How to test state update and component rerender after async call in react
- React Js component rendering only once after state change
- React useEffect calls API too many time, How can I limit the API call to only once when my component renders?
- React infinite scroll- double scrollbars showing- I only want the window scroll bar
- Redirect automatically from one component to another one after few seconds - react
- How does one React component call a method in another React component?
- Rendering part of a React function component after async call gets completed
- React - only one "active" child component at any one time
- React Router only one link working Github Pages
- External js is loading in react component only after refresh
- React infinite scroll component performance
- Authenticity token only gets set after form submission in React component which throws an error in Rails
- How to re-render only one component on hover when state changes in React
- How to call event from component after setting its state with React hooks?
- In React, how do I call a function in one component (which is being rendered with React Router) from another component?
- React infinite scroll component
- React hooks. Update component passed as param via onClick after one of it's prop was changed
More Query from same tag
- Removing item from redux-stored list and redirect back to list - delay props evaluating?
- Dealing With Multiple Flatlists on the same Screen
- How to get map properties and handle events in leaflet v3 with react + redux?
- How do I keep scrollbar justified to the right when the body has padding?
- Recharts set Y-axis to YES and NO
- Cant send a value to another page in react
- When I refresh the react.js and next.js page, it gives me 404 error
- Calling child component function
- React state update not reflecting
- Importing FontAwesome icons by string array in React.js
- Login Form validation in Reactjs : material ui <textfield>
- component is getting loaded for fraction of second in React
- React: Printing to the console executes after changes, instead of before, as it would be logical
- Understanding how/why/when React updates the DOM and how to use it
- onClick React other classes deactivation once clicked on a link
- React component isn't rendering after updating state by useState
- Testing state gets set correctly within componentDidMount from an ajax call
- Typescript: es6 import type definition (.d.ts) from node_modules subfolder
- Cannot read property 'length' of undefined in react
- Is there a way to change the className of an already existing react component?
- Set history dynamically without page reload
- Can I set css of Child in Styled Componet?
- Can you pass a function as an attribute inline in react?
- call a same instance component multiple times ReactJS
- React-Redux: visualize elements array
- React: Communicate between sibling components
- Setstate of specific object in array
- props.clickHandler is not a function (ReactJS)
- How to implement setInterval() function with interval as Minutes
- Is there a way to use Canvas to draw something on the click of a button with react.js?