danbovey
Is there a way to reset the current page?
Adding this issue because it was asked to me directly.
If you're filtering items, and the data needs to be completely changed, the page needs to be reset back to pageStart.
One solution is adding a method to the component: https://github.com/guillaumervls/react-infinite-scroll/pull/29
But really, if you need your own pagination methods, you should handle it in the state of your own component and ignore the pageToLoad parameter that you're given.
@danbovey I'm sorry but is the reset function merged to latest release?
Sorry there's not. If there was a pull request for one I would merge it, as I see how useful it could be now 😄
@danbovey I created a pull-request for the reset function Basically It is just a port to ES6 from the original pull-request Hope it will help
@danbovey Can you describe more clearly about the problem so I can see if I can provide some help. Sorry that you have to revert back
Basically, the component no longer attaches the scroll listener. Go to your branch, go to the docs folder, set the version of this package to 1.0.5 and run npm update. You'll see the demo no longer works.
I can't find this function in 1.0.7.And I use condition && <InfiniteScroll /> to render the component.
I've just added the ref to the InfiniteScroll:
<InfiniteScroll ref={(scroll) => { this.scroll = scroll; }} />
And reset the current page when i needed it:
this.scroll.pageLoaded = 0
Working for me. I am not sure but maybe all is needed just to add reset function to component from the PR above https://github.com/guillaumervls/react-infinite-scroll/pull/29/files#diff-daf041c271b89525b1dde05048d6383dR44
I can create PR but i don't know is it the best solution or not.
https://github.com/dantzchan/react-infinite-scroller/commit/506138f7b3dcbe88efdbfec267d400ecbbf1fd86
This is an iteration i made for my needs. Added prop isRestart to check if restart is needed and checks on componentWillReceiveProps.
I just stumble upon this right now with React 16... I'm more than willing to contribute.
@LorisTujiba found a work around that worked for me. Basically, add key property to any element that wrap the react-infinite-scroller and update that key to a different value, and this will cause the whole element to be recreated.
More details: https://stackoverflow.com/a/21750576/439427
@LorisTujiba I'm using in a production app right now, here's the source of a component that wrap the react-infinite-scroller: https://github.com/developersdo/opensource/blob/f4e61ef63caffe4758634abdb561ead0e308e16d/src/client/components/infinite-scroll/InfiniteScroll.js
@rmariuzzo Thanks!, its working, turns out i missed out the key property
This would be a great feature to have included. I ended up using @dantzchan's fork, which works great. I'm not a big fan of wrapping the component and flushing the whole thing with the key, as that's hacky and has more overhead than necessary.
Hi! I had the same problem I dont know if it serves someone but I solved it in this way:
My component initialState
constructor (props) {
super(props)
this.state = {
loadMore: true,
pageStart: 0
}
}
when I want to change the pageStar
const { pageStar } = this.state
this.setState({ pageStart: pageStart === 0 ? -1 : 0 })
my new class
class InfiniteScrollExtend extends InfiniteScroll{
componentDidUpdate(prevProps, prevState){
if(prevProps.pageStart !== this.props.pageStart){
this.pageLoaded = 0;
}
this.attachScrollListener();
}
}
and last
<InfiniteScrollExtend
pageStart={pageStart}
...
>
</InfiniteScrollExtend>
Hello! Thanks for this module.
So I came across the same problem, where I had to clear out the current search results and perform a new search from page 1, and I found that the infinite scroller hits the loadMore function with an invalid page number.
I fully understand that you find this a rather difficult problem to solve. That's okay. I switched to using a state variable to count the page (or in my case, store the next_page value received from API). It solved the problem nicely.
My suggestion would be add the hint to use our own page counting in such cases, somewhere in the Troubleshooting section of the README file. If this doesn't have a satisfactory solution right now, at least those who encounter the problem can be informed about the workaround.
You can also pin this issue. Look for a "Pin issue" option in the issue sidebar.
I needed to reset the scroller when using a search input and instead of using ref I fixed it another way by increasing the key when needed.
const [scrollKey, setScrollKey] = useState(1);
<input onChange={() => setScrollKey(scrollKey + 1)} />
<InfiniteScroll key={scrollKey} />
Not as performant I suppose, but it works.
