-1
rated 0 times
[
4]
[
5]
/ answers: 1 / hits: 90471
/ 8 Years ago, mon, july 25, 2016, 12:00:00
I had higher order component in react like this:
export default function (InnerComponent) {
class InfiniteScrolling extends React.Component {
constructor(props){
super(props);
}
componentDidMount() {
window.addEventListener('scroll', this.onScroll.bind(this), false);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.onScroll.bind(this), false);
}
onScroll() {
if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 50)) {
const { scrollFunc } = this.props;
scrollFunc();
}
}
render() {
return <InnerComponent {...this.props} />;
}
}
InfiniteScrolling.propTypes = {
scrollFunc: PropTypes.func.isRequired
};
return InfiniteScrolling;
}
After unmounting the component which are been wrapped via InfiniteScrolling, they where still throwing the error like (when I did scrolling):
Warning: setState(...): Can only update a mounted or mounting
component. This usually means you called setState() on an unmounted
component. This is a no-op. Please check the code for the undefined
component.
Even though I did remove the scroll event on my component unmount. It didn't work.
But when I changed the code to like this:
constructor(props){
super(props);
this.onScroll = this.onScroll.bind(this);
}
componentDidMount() {
window.addEventListener('scroll', this.onScroll, false);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.onScroll, false);
}
everything seems to be working fine, without any issues.
I feel they are exactly the same thing, but the second one works fine while the first one was throwing up the error in the console as mentioned before!
More From » reactjs
