Загрузить больше при прокрутке вниз в Reactjs
Это страница моей открытки (только конкретная часть), где я отображаю данные из полученного Api.
fetchMoreData(){
this.setState({
index: this.state.index + 5
})
}
componentDidMount(){
window.addEventListener('scroll', this.onScroll);
this.fetchMoreData();
}
onScroll = () => {
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
this.fetchMoreData();
}
});
}
Поскольку мой API - это API для тестирования, я получаю все данные со своей страницы сообщений, а затем передаю их на страницу моей открытки, поэтому при изменении this.state.index отображается больше элементов.
Проблема, с которой я столкнулся, заключается в том, что я получаю сообщение об ошибке, что this.fetchMoreData () не является функцией. Не стесняйтесь указывать на любые ошибки.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Сделайте fetchMoreData функцией стрелки так же, как onScroll
fetchMoreData = () => {
...
}
onScroll = () => {
$(window).scroll(() => {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
this.fetchMoreData();
}
});
}
Если вы используете function, он будет вызываться в контексте объекта window (в вашем случае). Вы можете использовать замыкания для сохранения родительского контекста, например:
onScroll = () => {
const that = this;
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
that.fetchMoreData();
}
});
};
Но стрелочные функции связывают аргумент this с аргументом родительской области, поэтому this будет ссылаться на ваш класс компонента. И это намного элегантнее и проще, чем использование function, особенно если вы уже используете стрелочные функции в своем компоненте.
добавил некоторое объяснение
вы можете использовать стрелочную функцию es6, потому что вам нужно привязать это значение из функции к нашему классу. так что это не сработает $(window).scroll(function() {. так что вы можете сделать это.
$(window).scroll(() => {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
this.fetchMoreData();
}
});
не могли бы вы объяснить.