У меня был компонент более высокого порядка, который реагирует так:
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;
}
После размонтирования компонента, который был обернут через InfiniteScrolling
, они все еще бросали ошибку (когда я прокручивал):
Предупреждение: setState (...): может обновлять только смонтированный или монтажный компонент. Обычно это означает, что вы вызывали setState() на немонтированном компоненте. Это не-op. Проверьте код для неопределенного компонента.
Несмотря на то, что я удалил событие scroll
на моем размонтировании компонентов. Это не сработало.
Но когда я изменил код так:
constructor(props){
super(props);
this.onScroll = this.onScroll.bind(this);
}
componentDidMount() {
window.addEventListener('scroll', this.onScroll, false);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.onScroll, false);
}
все, кажется, работает нормально, без каких-либо проблем.
Я чувствую, что они точно такие же, но второй отлично работает, в то время как первый из них вызывает ошибку в консоли, как упоминалось ранее!